/* Crew27 — generated from tokens.json */
:root, [data-theme="light"] {
  --white: #ffffff; /* Branco puro. Fundo de superfície elevada no tema claro e texto sobre preenchimento escuro. Igual em todas as marcas. */
  --p50: #f1f7ff; /* Primária 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p100: #ddecff; /* Primária 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p200: #c3ddff; /* Primária 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p300: #9ac6ff; /* Primária 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p400: #5ea6fe; /* Primária 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p500: #1988fb; /* Primária 500. Cor da marca informada, exata. É a semente de toda a escala primária. */
  --p600: #0470d6; /* Primária 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p700: #015fb7; /* Primária 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p800: #054c94; /* Primária 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p900: #00407f; /* Primária 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --p950: #01264f; /* Primária 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s50: #fff3f6; /* Secundária 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s100: #ffe2ea; /* Secundária 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s200: #feccda; /* Secundária 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s300: #fea9c3; /* Secundária 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s400: #fe6fa3; /* Secundária 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s500: #fb1988; /* Secundária 500. Cor da marca informada, exata. É a semente de toda a escala secundária. */
  --s600: #d20c70; /* Secundária 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s700: #b3055f; /* Secundária 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s800: #91084c; /* Secundária 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s900: #7c003f; /* Secundária 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --s950: #4c0124; /* Secundária 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n50: #f5f9fd; /* Neutra 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n100: #eaf0f7; /* Neutra 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n200: #dce5f0; /* Neutra 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n300: #cad5e3; /* Neutra 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n400: #b2becd; /* Neutra 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n500: #98a4b3; /* Neutra 500. Cor da marca informada, exata. É a semente de toda a escala neutra. */
  --n600: #5f6a77; /* Neutra 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n700: #39424e; /* Neutra 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n800: #212933; /* Neutra 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n900: #0f161e; /* Neutra 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --n950: #05090f; /* Neutra 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su50: #e5ffea; /* Sucesso 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su100: #c7fad1; /* Sucesso 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su200: #a0f2b3; /* Sucesso 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su300: #75e192; /* Sucesso 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su400: #46c46f; /* Sucesso 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su500: #16aa54; /* Sucesso 500. Cor da marca informada, exata. É a semente de toda a escala sucesso. */
  --su600: #098d44; /* Sucesso 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su700: #047838; /* Sucesso 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su800: #06602c; /* Sucesso 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su900: #005123; /* Sucesso 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --su950: #003012; /* Sucesso 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a50: #fff6e6; /* Alerta 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a100: #fff0d5; /* Alerta 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a200: #ffe8c0; /* Alerta 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a300: #fedc9e; /* Alerta 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a400: #fecb68; /* Alerta 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a500: #ffbb00; /* Alerta 500. Cor da marca informada, exata. É a semente de toda a escala alerta. */
  --a600: #cd9711; /* Alerta 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a700: #a97b0b; /* Alerta 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a800: #825e00; /* Alerta 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a900: #694b00; /* Alerta 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --a950: #342300; /* Alerta 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d50: #fff4f2; /* Erro 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d100: #ffe3df; /* Erro 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d200: #feccc6; /* Erro 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d300: #ffa89d; /* Erro 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d400: #fd6f63; /* Erro 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d500: #f42d2d; /* Erro 500. Cor da marca informada, exata. É a semente de toda a escala erro. */
  --d600: #d20e19; /* Erro 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d700: #b40914; /* Erro 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d800: #93030d; /* Erro 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d900: #7d040a; /* Erro 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --d950: #4f0103; /* Erro 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i50: #f2f7ff; /* Informação 50. Fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i100: #d8e9ff; /* Informação 100. Fundo suave e realce no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i200: #b8d6fe; /* Informação 200. Borda e realce. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i300: #86b9fe; /* Informação 300. Realce e divisória forte. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i400: #398ffb; /* Informação 400. Texto e link no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i500: #006cd9; /* Informação 500. Cor da marca informada, exata. É a semente de toda a escala informação. */
  --i600: #015bb9; /* Informação 600. Preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i700: #034fa0; /* Informação 700. Link e preenchimento no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i800: #004188; /* Informação 800. Texto sobre fundo suave no claro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i900: #033875; /* Informação 900. Texto sobre fundo suave no claro e fundo no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --i950: #012551; /* Informação 950. Fundo suave no escuro. Gerado do 500 da marca; os componentes leem papéis, não passos. */
  --surface: var(--white); /* Fundo da página. No tema claro é branco puro, igual a surface-raised: a separação entre página e cartão vem de borda e sombra, não de cor. Texto ink, ink-soft e ink-faint leem sobre ele. */
  --surface-raised: var(--white); /* Cartões, campos, modais e popovers, acima de surface. Mesmos textos de surface. */
  --surface-sunken: var(--n100); /* Poços, cabeçalho de tabela, trilha de progresso e linhas em hover. Mesmos textos de surface. */
  --surface-inverse: var(--n900); /* Tooltip e faixas que invertem o tema. Texto ink-inverse sobre ele. */
  --ink: var(--n900); /* Texto principal e títulos sobre surface, surface-raised e surface-sunken (7:1). */
  --ink-soft: var(--n700); /* Texto secundário, rótulos e ícones neutros sobre as três superfícies (4.5:1). */
  --ink-faint: var(--n600); /* Placeholder, texto de ajuda e desabilitado sobre as três superfícies (4.5:1). Nunca para informação essencial. */
  --ink-inverse: var(--n50); /* Texto sobre surface-inverse (7:1). */
  --line: var(--n300); /* Divisória decorativa e borda de cartão. Não carrega significado sozinha; para controles use line-control. */
  --line-control: var(--n600); /* Borda de campo, checkbox, radio e toggle desligado (3:1 sobre as três superfícies). */
  --action: var(--p600); /* Preenchimento da ação principal, indicador de aba ativa, checkbox marcado e barra de progresso (3:1 sobre as superfícies). Texto sobre ele usa on-action. */
  --action-hover: var(--p700); /* Estado hover do preenchimento action. */
  --action-active: var(--p800); /* Estado pressionado do preenchimento action. */
  --on-action: var(--white); /* Texto e ícone sobre action, action-hover e action-active (4.5:1). Pode ser branco ou escuro, o gerador escolhe por contraste. */
  --action-soft: var(--p100); /* Fundo suave da cor de ação: tag, item selecionado, destaque. Texto on-action-soft sobre ele. */
  --on-action-soft: var(--p800); /* Texto e ícone da cor de ação sobre action-soft, surface e surface-raised (4.5:1). */
  --link: var(--p700); /* Links e texto colorido da marca sobre as três superfícies (4.5:1). Também é a cor do anel de foco. */
  --focus: var(--p700); /* Anel de foco, sólido de 2px com 2px de afastamento (3:1 sobre as três superfícies). */
  --accent: var(--s600); /* Segunda cor da marca (escala secundária): avatar, destaque pontual, tag accent (3:1 sobre as superfícies). Texto sobre ele usa on-accent. */
  --on-accent: var(--white); /* Texto e ícone sobre accent (4.5:1). */
  --accent-soft: var(--s100); /* Fundo suave do acento. Texto on-accent-soft sobre ele. */
  --on-accent-soft: var(--s800); /* Texto do acento sobre accent-soft, surface e surface-raised (4.5:1). */
  --success: var(--su700); /* Cor de sucesso para ícone, borda de aviso, barra e tag sólida (3:1 sobre as superfícies). Sempre acompanhada de ícone ou palavra. */
  --on-success: var(--white); /* Texto sobre success (4.5:1). */
  --success-soft: var(--su100); /* Fundo suave de sucesso: banner, tag suave, campo com erro. Texto on-success-soft sobre ele. */
  --on-success-soft: var(--su800); /* Texto e ícone de sucesso sobre success-soft, surface e surface-raised (4.5:1). */
  --alert: var(--a800); /* Cor de alerta para ícone, borda de aviso, barra e tag sólida (3:1 sobre as superfícies). Sempre acompanhada de ícone ou palavra. */
  --on-alert: var(--white); /* Texto sobre alert (4.5:1). */
  --alert-soft: var(--a100); /* Fundo suave de alerta: banner, tag suave, campo com erro. Texto on-alert-soft sobre ele. */
  --on-alert-soft: var(--a800); /* Texto e ícone de alerta sobre alert-soft, surface e surface-raised (4.5:1). */
  --danger: var(--d600); /* Cor de erro para ícone, borda de aviso, barra e tag sólida (3:1 sobre as superfícies). Sempre acompanhada de ícone ou palavra. */
  --on-danger: var(--white); /* Texto sobre danger (4.5:1). */
  --danger-soft: var(--d100); /* Fundo suave de erro: banner, tag suave, campo com erro. Texto on-danger-soft sobre ele. */
  --on-danger-soft: var(--d800); /* Texto e ícone de erro sobre danger-soft, surface e surface-raised (4.5:1). */
  --info: var(--i500); /* Cor de informação para ícone, borda de aviso, barra e tag sólida (3:1 sobre as superfícies). Sempre acompanhada de ícone ou palavra. */
  --on-info: var(--white); /* Texto sobre info (4.5:1). */
  --info-soft: var(--i100); /* Fundo suave de informação: banner, tag suave, campo com erro. Texto on-info-soft sobre ele. */
  --on-info-soft: var(--i800); /* Texto e ícone de informação sobre info-soft, surface e surface-raised (4.5:1). */
  --accent-solid: var(--s600); /* Preenchimento sólido de accent em Button e IconButton. No tema claro é igual a accent; no escuro é um passo que carrega texto branco (4.5:1). Texto sobre ele usa on-accent-solid. */
  --on-accent-solid: var(--white); /* Texto e ícone sobre accent-solid (4.5:1). Branco no tema escuro. */
  --success-solid: var(--su700); /* Preenchimento sólido de success em Button e IconButton. No tema claro é igual a success; no escuro é um passo que carrega texto branco (4.5:1). Texto sobre ele usa on-success-solid. */
  --on-success-solid: var(--white); /* Texto e ícone sobre success-solid (4.5:1). Branco no tema escuro. */
  --danger-solid: var(--d600); /* Preenchimento sólido de danger em Button e IconButton. No tema claro é igual a danger; no escuro é um passo que carrega texto branco (4.5:1). Texto sobre ele usa on-danger-solid. */
  --on-danger-solid: var(--white); /* Texto e ícone sobre danger-solid (4.5:1). Branco no tema escuro. */
  --info-solid: var(--i500); /* Preenchimento sólido de info em Button e IconButton. No tema claro é igual a info; no escuro é um passo que carrega texto branco (4.5:1). Texto sobre ele usa on-info-solid. */
  --on-info-solid: var(--white); /* Texto e ícone sobre info-solid (4.5:1). Branco no tema escuro. */
  --background: var(--white); /* Fundo da página, igual a surface. Existe para as ferramentas que procuram um token chamado background; os componentes leem surface. */
  --scrim: #000000a6; /* Película atrás de modal e drawer. */
  --shadow-1: 0px 1px 2px 0px #0000001a; /* Cartão em repouso e controles elevados. */
  --shadow-2: 0px 4px 12px 0px #0000001f; /* Popover, menu e cartão em hover. */
  --shadow-3: 0px 16px 40px 0px #00000029; /* Modal e drawer. */
}
[data-theme="dark"] {
  --surface: var(--n900);
  --surface-raised: var(--n800);
  --surface-sunken: var(--n950);
  --surface-inverse: var(--n50);
  --ink: var(--n50);
  --ink-soft: var(--n400);
  --ink-faint: var(--n500);
  --ink-inverse: var(--n900);
  --line: var(--n600);
  --line-control: var(--n500);
  --action: var(--p600);
  --action-hover: var(--p700);
  --action-active: var(--p800);
  --on-action: var(--white);
  --action-soft: var(--p950);
  --on-action-soft: var(--p200);
  --link: var(--p400);
  --focus: var(--p400);
  --accent: var(--s500);
  --on-accent: var(--n950);
  --accent-soft: var(--s950);
  --on-accent-soft: var(--s200);
  --success: var(--su500);
  --on-success: var(--n950);
  --success-soft: var(--su950);
  --on-success-soft: var(--su200);
  --alert: var(--a500);
  --on-alert: var(--n950);
  --alert-soft: var(--a950);
  --on-alert-soft: var(--a200);
  --danger: var(--d500);
  --on-danger: var(--n950);
  --danger-soft: var(--d950);
  --on-danger-soft: var(--d200);
  --info: var(--i400);
  --on-info: var(--n950);
  --info-soft: var(--i950);
  --on-info-soft: var(--i200);
  --accent-solid: var(--s600);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i500);
  --on-info-solid: var(--white);
  --background: var(--n900);
  --scrim: #000000cc;
  --shadow-1: 0px 1px 2px 0px #00000066;
  --shadow-2: 0px 4px 12px 0px #00000080;
  --shadow-3: 0px 16px 40px 0px #000000a6;
}
:root {
  --space-1: 4px; /* Ícone e texto colados, espaço entre rótulo e ajuda. */
  --space-2: 8px; /* Espaço entre ícone e rótulo, entre tags. */
  --space-3: 12px; /* Padding interno de campo e de botão pequeno. */
  --space-4: 16px; /* Padding de botão, de cartão compacto e entre campos. */
  --space-5: 20px; /* Padding de cartão. */
  --space-6: 24px; /* Padding de modal e entre grupos de campos. */
  --space-8: 32px; /* Entre seções de uma tela. */
  --space-10: 40px; /* Margem de página em telas pequenas. */
  --space-12: 48px; /* Entre blocos grandes. */
  --space-16: 64px; /* Respiro de seção de página. */
  --control-xs: 24px; /* Altura e largura do IconButton extra pequeno. Em controles densos, nunca para alvo principal de toque. */
  --control-sm: 32px; /* Altura de botão e campo pequenos. */
  --control-md: 40px; /* Altura padrão de botão e campo. */
  --control-lg: 48px; /* Altura de botão e campo grandes e alvo de toque. */
  --radius-base: 6px; /* Raio padrão da marca. É a ÚNICA entrada: sm, md, lg e xl derivam dele. Componentes nunca leem este token direto. */
  --radius-sm: 3px; /* Metade da base. Tag, checkbox, tooltip e itens pequenos. Derivado: o valor aqui é o da marca padrão; cada marca recalcula. */
  --radius-md: 6px; /* Igual à base. Botão, campo, select e aba. Derivado. */
  --radius-lg: 9px; /* Base vezes 1,5. Cartão, modal, banner e tabela. Derivado. */
  --radius-xl: 12px; /* Base vezes 2. Imagens grandes, painéis e destaque. Derivado. */
  --radius-full: 999px; /* Avatar, toggle, radio e badge circular. Igual em todas as marcas. */
  --heading-weight: 700; /* Peso de títulos display e heading. Definido pela marca. */
  --heading-case: none; /* Caixa de títulos display e heading: none, uppercase, lowercase ou capitalize. Definida pela marca; o componente nunca decide. */
  --body-weight: 400; /* Peso de texto corrido. Definido pela marca. */
  --mono-weight: 400; /* Peso de código. Definido pela marca. */
  --label-weight: 600; /* Peso de rótulos de campo, abas e itens de menu. Definido pela marca. */
  --label-case: none; /* Caixa de rótulos de campo, abas e itens de menu: none, uppercase, lowercase ou capitalize. Definida pela marca; o componente nunca decide. */
  --label-tracking: 0; /* Espaçamento entre letras de rótulos de campo, abas e itens de menu. Marcas com caixa alta precisam de valor positivo. */
  --button-weight: 700; /* Peso de texto de botão. Definido pela marca. */
  --button-case: none; /* Caixa de texto de botão: none, uppercase, lowercase ou capitalize. Definida pela marca; o componente nunca decide. */
  --button-tracking: 0; /* Espaçamento entre letras de texto de botão. Marcas com caixa alta precisam de valor positivo. */
  --caption-weight: 600; /* Peso de tag, legenda e cabeçalho de tabela. Definido pela marca. */
  --caption-case: none; /* Caixa de tag, legenda e cabeçalho de tabela: none, uppercase, lowercase ou capitalize. Definida pela marca; o componente nunca decide. */
  --caption-tracking: 0.02em; /* Espaçamento entre letras de tag, legenda e cabeçalho de tabela. Marcas com caixa alta precisam de valor positivo. */
  --icon-weight: regular; /* Peso dos ícones (Phosphor): thin, light, regular, bold, fill ou duotone. Definido pela marca; <Icon weight> troca em um uso. Valor da marca padrão. */
  --border-control: 1px; /* Espessura da borda de botão, campo e controles. Definida pela marca. */
  --duration-fast: 120ms; /* Feedback imediato: hover, foco, troca de cor, toggle. */
  --duration-base: 200ms; /* Elementos pequenos que entram e saem: dropdown, popover, tooltip, toast, recolher. */
  --duration-slow: 320ms; /* Elementos grandes que entram: modal, drawer, scrim. É o teto do sistema. A saída dura 75% da entrada. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Estados: hover, foco, cor, toggle. */
  --ease-gently: cubic-bezier(0.22, 1, 0.36, 1); /* Entradas: o elemento chega rápido e pousa devagar. Drawer, modal, popover, toast, tooltip. */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Saídas: o elemento acelera e deixa a tela. */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* Movimento de algo que continua visível: barra de progresso, recolher e expandir. */
  --z-sticky: 100; /* Cabeçalho e barras fixas. */
  --z-dropdown: 1000; /* Menu, select e popover. */
  --z-modal: 1100; /* Modal e drawer com scrim. */
  --z-tooltip: 1200; /* Tooltip, sempre acima de tudo. */
  --font-heading: "Kumbh Sans", system-ui, sans-serif;
  --font-body: "Kumbh Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-display-xl: 700 56px/60px var(--font-heading); /* Capa e primeira dobra. Uma por tela. Peso e caixa vêm da marca (papel heading). */
  --text-display-lg: 700 44px/48px var(--font-heading); /* Título de página de destaque. */
  --text-display-md: 700 36px/40px var(--font-heading); /* Título de seção grande. */
  --text-heading-lg: 700 28px/36px var(--font-heading); /* Título de página de produto (h1). */
  --text-heading-md: 700 22px/30px var(--font-heading); /* Título de seção e de modal (h2). */
  --text-heading-sm: 700 18px/26px var(--font-heading); /* Título de cartão e subseção (h3). */
  --text-body-lg: 400 18px/28px var(--font-body); /* Texto de abertura e leitura longa. */
  --text-body: 400 16px/24px var(--font-body); /* Texto corrido padrão e valor de campo. */
  --text-body-sm: 400 14px/20px var(--font-body); /* Texto de apoio, células de tabela e ajuda de campo. */
  --text-label: 600 14px/20px var(--font-body); /* Rótulo de campo, aba e item de menu. Peso, caixa e espaçamento vêm da marca (papel label). */
  --text-button: 700 14px/20px var(--font-body); /* Texto de botão. Peso, caixa e espaçamento vêm da marca (papel button). */
  --text-caption: 600 12px/16px var(--font-body); /* Tag, legenda e cabeçalho de tabela. Peso, caixa e espaçamento vêm da marca (papel caption). */
  --text-code: 400 14px/20px var(--font-mono); /* Trechos de código, valores de token e atalhos. */
}
.display-xl {
  font-family: var(--font-heading);
  font-size: 56px;
  line-height: 60px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display-md {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.heading-lg {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.heading-md {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
}
.heading-sm {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}