@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
  /**
   * Backdrop blur SM
   * Desfoque leve de fundo para profundidade sutil em sobreposições.
   * Exemplo: pequenas cards ou menus.
   */
  --backdrop-blur-sm: blur(4px);

  /**
   * Backdrop blur MD
   * Desfoque moderado de fundo para elevação média em componentes.
   * Exemplo: painéis de diálogo leves.
   */
  --backdrop-blur-md: blur(8px);

  /**
   * Backdrop blur LG
   * Desfoque intenso de fundo para destacar modais ou overlays grandes.
   */
  --backdrop-blur-lg: blur(16px);

  /**
   * Backdrop blur XL
   * Desfoque pesado de fundo para camadas de fundo fortemente desfocadas
   * em contextos de foco visual.
   */
  --backdrop-blur-xl: blur(24px);
}
:root {
  /**
   * Fundo primário
   * Cor de fundo primária (branco) usada em todos os layouts e componentes.
   */
  --bg-primary: light-dark(var(--color-base-white), var(--color-gray-950));

  /**
   * Fundo primário alternativo
   * Cor de fundo primária alternativa (branco) que troca para bg-secondary no modo escuro.
   */
  --bg-primary_alt: light-dark(var(--color-base-white), var(--color-gray-900));

  /**
   * Fundo primário (hover)
   * Cor de fundo para estado hover em componentes com fundo branco (ex. itens de dropdown).
   */
  --bg-primary_hover: light-dark(var(--color-gray-50), var(--color-gray-800));

  /**
   * Fundo primário sólido
   * Cor de fundo escura primária usada em layouts e componentes; no modo escuro alterna para bg-secondary.
   * Útil em tooltips e tooltips de editor de texto.
   */
  --bg-primary-solid: light-dark(var(--color-gray-950), var(--color-gray-900));

  /**
   * Fundo secundário
   * Cor de fundo secundária usada para criar contraste contra fundos brancos (ex. seções de site).
   */
  --bg-secondary: light-dark(var(--color-gray-50), var(--color-gray-900));

  /**
   * Fundo secundário alternativo
   * Cor de fundo secundária alternativa que troca para bg-primary no modo escuro.
   * Útil em abas horizontais de borda.
   */
  --bg-secondary_alt: light-dark(var(--color-gray-50), var(--color-gray-950));

  /**
   * Fundo secundário (hover)
   * Cor de fundo para estado hover em componentes com fundo cinza-50 (ex. navegação, date-pickers).
   */
  --bg-secondary_hover: light-dark(var(--color-gray-100), var(--color-gray-800));

  /**
   * Fundo secundário sutil
   * Variante mais clara e sutil em modo claro, útil em banners.
   */
  --bg-secondary_subtle: light-dark(var(--color-gray-25), var(--color-gray-900));

  /**
   * Fundo secundário sólido
   * Cor de fundo escura secundária usada em layouts e componentes;
   * útil em ícones em destaque.
   */
  --bg-secondary-solid: light-dark(var(--color-gray-600), var(--color-gray-600));

  /**
   * Fundo terciário
   * Cor de fundo terciária usada para criar contraste contra fundos claros (ex. toggles).
   */
  --bg-tertiary: light-dark(var(--color-gray-100), var(--color-gray-800));

  /**
   * Fundo quaternário
   * Cor de fundo quaternária usada para criar contraste contra fundos claros (ex. sliders, progress bars).
   */
  --bg-quaternary: light-dark(var(--color-gray-200), var(--color-gray-700));

  /**
   * Fundo ativo
   * Cor de fundo padrão para estado ativo em componentes (ex. item selecionado em dropdown).
   */
  --bg-active: light-dark(var(--color-gray-50), var(--color-gray-800));

  /**
   * Fundo desabilitado
   * Cor de fundo padrão para componentes desabilitados (ex. botões primários e toggles).
   */
  --bg-disabled: light-dark(var(--color-gray-100), var(--color-gray-800));

  /**
   * Fundo desabilitado sutil
   * Variante mais sutil para componentes desabilitados (ex. campos de formulário, checkboxes).
   */
  --bg-disabled_subtle: light-dark(var(--color-gray-50), var(--color-gray-900));

  /**
   * Fundo overlay
   * Cor de fundo para overlays, útil em modals.
   */
  --bg-overlay: light-dark(var(--color-gray-950), var(--color-gray-800));

  /**
   * Fundo da marca primária
   * Cor de fundo primária da marca, útil em componentes como ícones de confirmação.
   */
  --bg-brand-primary: light-dark(var(--color-brand-50), var(--color-brand-500));

  /**
   * Fundo da marca primária alternativo
   * Cor de fundo da marca que troca para bg-secondary no modo escuro (ex. abas horizontais ativas).
   */
  --bg-brand-primary_alt: light-dark(
    var(--color-brand-50),
    var(--color-gray-800)
  );

  /**
   * Fundo da marca secundária
   * Cor de fundo secundária da marca, útil em componentes como ícones em destaque.
   */
  --bg-brand-secondary: light-dark(
    var(--color-brand-100),
    var(--color-brand-600)
  );

  /**
   * Fundo sólido da marca
   * Cor sólida de fundo da marca usada em toggles e mensagens.
   */
  --bg-brand-solid: light-dark(var(--color-brand-600), var(--color-brand-600));

  /**
   * Fundo sólido da marca (hover)
   * Cor sólida de fundo da marca em estado hover, útil em toggles.
   */
  --bg-brand-solid_hover: light-dark(
    var(--color-brand-700),
    var(--color-brand-500)
  );

  /**
   * Fundo de seção da marca
   * Cor de fundo padrão para seções de site (ex. CTAs, testimonials); no modo escuro alterna para bg-secondary.
   */
  --bg-brand-section: light-dark(var(--color-brand-800), var(--color-gray-800));

  /**
   * Fundo de seção da marca sutil
   * Variante sutil para seções de FAQ; no modo escuro alterna para bg-primary.
   */
  --bg-brand-section_subtle: light-dark(
    var(--color-brand-700),
    var(--color-gray-950)
  );

  /**
   * Fundo de erro primário
   * Cor semântica primária de erro para componentes (ex. botões).
   */
  --bg-error-primary: light-dark(var(--color-error-50), var(--color-error-950));

  /**
   * Fundo de erro secundário
   * Cor semântica secundária de erro, útil em ícones em destaque.
   */
  --bg-error-secondary: light-dark(
    var(--color-error-100),
    var(--color-error-600)
  );

  /**
   * Fundo sólido de erro
   * Cor sólida de fundo de erro usada em botões, ícones em destaque e metric items.
   */
  --bg-error-solid: light-dark(var(--color-error-600), var(--color-error-600));

  /**
   * Fundo sólido de erro (hover)
   * Cor sólida de fundo de erro em estado hover, útil em botões.
   */
  --bg-error-solid_hover: light-dark(
    var(--color-error-700),
    var(--color-error-500)
  );

  /**
   * Fundo de aviso primário
   * Cor semântica primária de aviso para componentes.
   */
  --bg-warning-primary: light-dark(
    var(--color-warning-50),
    var(--color-warning-950)
  );

  /**
   * Fundo de aviso secundário
   * Cor semântica secundária de aviso, útil em ícones destacados.
   */
  --bg-warning-secondary: light-dark(
    var(--color-warning-100),
    var(--color-warning-600)
  );

  /**
   * Fundo sólido de aviso
   * Cor sólida de fundo de aviso usada em ícones em destaque.
   */
  --bg-warning-solid: light-dark(
    var(--color-warning-600),
    var(--color-warning-600)
  );

  /**
   * Fundo de sucesso primário
   * Cor semântica primária de sucesso para componentes.
   */
  --bg-success-primary: light-dark(
    var(--color-success-50),
    var(--color-success-950)
  );

  /**
   * Fundo de sucesso secundário
   * Cor semântica secundária de sucesso, útil em ícones em destaque.
   */
  --bg-success-secondary: light-dark(
    var(--color-success-100),
    var(--color-success-600)
  );

  /**
   * Fundo sólido de sucesso
   * Cor sólida de fundo de sucesso usada em ícones em destaque e metric items.
   */
  --bg-success-solid: light-dark(
    var(--color-success-600),
    var(--color-success-600)
  );
}
:root {
  /**
   * Borda primária
   * Bordas de alto contraste usadas em componentes como campos de entrada,
   * grupos de botões e checkboxes.
   */
  --border-primary: light-dark(var(--color-gray-300), var(--color-gray-700));

  /**
   * Borda secundária
   * Bordas de contraste médio, padrão para a maioria dos componentes
   * (file uploaders, cards e divisores de conteúdo).
   */
  --border-secondary: light-dark(var(--color-gray-200), var(--color-gray-800));

  /**
   * Borda secundária alternativa
   * Variante com transparência alfa (8%) para menus flutuantes
   * como dropdowns e notificações, criando uma linha inferior mais nítida.
   */
  --border-secondary_alt: light-dark(rgba(0, 0, 0, 0.08), var(--color-gray-800));

  /**
   * Borda terciária
   * Bordas de baixo contraste para divisores muito sutis,
   * como eixos de gráficos de linha e barras.
   */
  --border-tertiary: light-dark(var(--color-gray-100), var(--color-gray-800));

  /**
   * Borda desabilitada
   * Cor padrão para estados desabilitados em componentes
   * como campos de entrada e checkboxes.
   */
  --border-disabled: light-dark(var(--color-gray-300), var(--color-gray-700));

  /**
   * Borda desabilitada sutil
   * Variante de contraste ainda menor para bordas desabilitadas,
   * útil para botões no estado desativado.
   */
  --border-disabled_subtle: light-dark(
    var(--color-gray-200),
    var(--color-gray-800)
  );

  /**
   * Borda da marca
   * Cor de borda padrão da marca, útil para estados ativos
   * em componentes como campos de entrada.
   */
  --border-brand: light-dark(var(--color-brand-500), var(--color-brand-400));

  /**
   * Borda da marca alternativa
   * Variante que se torna cinza no modo escuro, usada em
   * componentes estilo “banner” e rodapés da marca.
   */
  --border-brand_alt: light-dark(var(--color-brand-600), var(--color-gray-700));

  /**
   * Borda de erro
   * Cor semântica padrão para bordas em estado de erro,
   * usada em componentes como campos de formulário e uploaders.
   */
  --border-error: light-dark(var(--color-error-500), var(--color-error-400));

  /**
   * Borda de erro sutil
   * Variante de contraste reduzido para bordas semânticas de erro,
   * útil em campos de formulário com estado de erro menos severo.
   */
  --border-error_subtle: light-dark(
    var(--color-error-300),
    var(--color-error-500)
  );
}
:root {
  /**
   * radius-none
   * Sem arredondamento; raio zero.
   */
  --radius-none: 0px;

  /**
   * radius-xxs
   * Raio de 2px para cantos levemente arredondados.
   */
  --radius-xxs: 2px;

  /**
   * radius-xs
   * Raio de 4px para cantos suavemente arredondados.
   */
  --radius-xs: 4px;

  /**
   * radius-sm
   * Raio de 6px para cantos arredondados padrão.
   */
  --radius-sm: 6px;

  /**
   * radius-md
   * Raio de 8px para cantos arredondados moderados.
   */
  --radius-md: 8px;

  /**
   * radius-lg
   * Raio de 10px para cantos arredondados grandes.
   */
  --radius-lg: 10px;

  /**
   * radius-xl
   * Raio de 12px para cantos arredondados extra grandes.
   */
  --radius-xl: 12px;

  /**
   * radius-2xl
   * Raio de 16px para cantos extra extra grandes.
   */
  --radius-2xl: 16px;

  /**
   * radius-3xl
   * Raio de 20px para cantos ainda mais arredondados.
   */
  --radius-3xl: 20px;

  /**
   * radius-4xl
   * Raio de 24px para bordas fortemente arredondadas.
   */
  --radius-4xl: 24px;

  /**
   * radius-full
   * Raio máximo (9999px) para perfis totalmente circulares.
   */
  --radius-full: 9999px;
}
:root {
  /**
   * Base
   *
   * Estas são as cores base (branco e preto) para você alternar rapidamente,
   * caso precise.
   */
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-base-transparent: #ffffff 0%;

  /**
   * Cinza (modo claro)
   *
   * Cinza é uma cor neutra e é a base do sistema de cores.
   * Quase tudo em design de interface — texto, campos de formulário,
   * fundos, divisores — normalmente é cinza.
   */
  @media (prefers-color-scheme: light) {
    --color-gray-25: #fdfdfd;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e9eaeb;
    --color-gray-300: #d5d7da;
    --color-gray-400: #a4a7ae;
    --color-gray-500: #717680;
    --color-gray-600: #535862;
    --color-gray-700: #414651;
    --color-gray-800: #252b37;
    --color-gray-900: #181d27;
    --color-gray-950: #0a0d12;
  }

  /**
   * Cinza (modo escuro)
   *
   * Esta é uma paleta de cinza separada usada especificamente para o modo escuro.
   * Essa cor foi dessaturada e otimizada para funcionar bem com variáveis do modo escuro.
   */
  @media (prefers-color-scheme: dark) {
    --color-gray-25: #fafafa;
    --color-gray-50: #f7f7f7;
    --color-gray-100: #f0f0f1;
    --color-gray-200: #ececed;
    --color-gray-300: #cecfd2;
    --color-gray-400: #94979c;
    --color-gray-500: #85888e;
    --color-gray-600: #61656c;
    --color-gray-700: #373a41;
    --color-gray-800: #22262f;
    --color-gray-900: #13161b;
    --color-gray-950: #0c0e12;
  }

  /**
   * Marca
   *
   * A cor da marca é sua cor “primária” e é usada em todos os elementos
   * interativos — botões, links, inputs etc. — podendo definir a sensação
   * geral e evocar emoções.
   */
  --color-brand-25: #fcfaff;
  --color-brand-50: #f9f5ff;
  --color-brand-100: #f4ebff;
  --color-brand-200: #e9d7fe;
  --color-brand-300: #d6bbfb;
  --color-brand-400: #b692f6;
  --color-brand-500: #9e77ed;
  --color-brand-600: #7f56d9;
  --color-brand-700: #6941c6;
  --color-brand-800: #53389e;
  --color-brand-900: #42307d;
  --color-brand-950: #2c1c5f;

  /**
   * Erro
   *
   * Cores de erro são usadas em estados de erro e em ações “destrutivas”.
   * Elas comunicam uma ação negativa, como remover um usuário da equipe.
   */
  --color-error-25: #fffbfa;
  --color-error-50: #fef3f2;
  --color-error-100: #fee4e2;
  --color-error-200: #fecdca;
  --color-error-300: #fda29b;
  --color-error-400: #f97066;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-error-700: #b42318;
  --color-error-800: #912018;
  --color-error-900: #7a271a;
  --color-error-950: #55160c;

  /**
   * Aviso
   *
   * Cores de aviso podem indicar que uma ação é potencialmente destrutiva
   * ou “em espera”. São comumente usadas em confirmações para chamar
   * a atenção do usuário.
   */
  --color-warning-25: #fffcf5;
  --color-warning-50: #fffaeb;
  --color-warning-100: #fef0c7;
  --color-warning-200: #fedf89;
  --color-warning-300: #fec84b;
  --color-warning-400: #fdb022;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-warning-700: #b54708;
  --color-warning-800: #93370d;
  --color-warning-900: #7a2e0e;
  --color-warning-950: #4e1d09;

  /**
   * Sucesso
   *
   * Cores de sucesso comunicam ações positivas, tendências favoráveis
   * ou confirmações bem-sucedidas. Útil diferenciar do verde primário.
   */
  --color-success-25: #f6fef9;
  --color-success-50: #ecfdf3;
  --color-success-100: #dcfae6;
  --color-success-200: #abfec6;
  --color-success-300: #75e0a7;
  --color-success-400: #47cd89;
  --color-success-500: #17b26a;
  --color-success-600: #079455;
  --color-success-700: #067647;
  --color-success-800: #085d3a;
  --color-success-900: #074d31;
  --color-success-950: #053321;
}
:root {
  /**
   * container-padding-mobile
   * Espaçamento interno padrão para containers em dispositivos móveis.
   * Padding: 16px
   */
  --container-padding-mobile: 16px;

  /**
   * container-padding-desktop
   * Espaçamento interno padrão para containers em desktop.
   * Padding: 32px
   */
  --container-padding-desktop: 32px;

  /**
   * container-max-width-desktop
   * Largura máxima dos containers em desktop para centralizar o conteúdo.
   * Max-width: 1280px
   */
  --container-max-width-desktop: 1280px;
}
:root {
  /**
   * Focus ring
   * Indicador de foco simples (sem sombra) para elementos como toggles e checkboxes.
   * Cor da marca.
   */
  --focus-ring: 0px 0px 0px 2px var(--bg-primary), 0px 0px 0px 4px
    var(--color-brand-500);

  /**
   * Focus ring error
   * Indicador de foco simples em estado de erro.
   * Cor de erro.
   */

  --focus-ring-error: 0px 0px 0px 2px var(--bg-primary), 0px 0px 0px 4px
    var(--color-error-500);

  /**
   * Focus ring + sombra XS
   * Indicador de foco combinado com sombra XS (elevação mínima).
   */
  --focus-ring-shadow-xs: 0 0 0 1px var(--color-brand-500), var(--shadow-xs);

  /**
   * Focus ring + sombra SM
   * Indicador de foco combinado com sombra SM (elevação sutil).
   */
  --focus-ring-shadow-sm: 0 0 0 1px var(--color-brand-500), var(--shadow-sm);

  /**
   * Focus ring error + sombra XS
   * Indicador de foco em erro combinado com sombra XS.
   */
  --focus-ring-error-shadow-xs: 0 0 0 1px var(--color-error-500),
    var(--shadow-xs);

  /**
   * Focus ring + sombra XS + inner shadow
   * Indicador de foco com sombra XS e uma sombra interna sutil para efeito
   * esquelético.
   */
  --focus-ring-shadow-xs-skeuomorphic: 0 0 0 1px var(--color-brand-500),
    var(--shadow-xs), var(--shadow-inner);

  /**
   * Focus ring error + sombra XS + inner shadow
   * Indicador de foco em erro com sombra XS e sombra interna sutil para efeito
   * esquelético.
   */
  --focus-ring-error-shadow-xs-skeuomorphic: 0 0 0 1px var(--color-error-500),
    var(--shadow-xs), var(--shadow-inner);
}
:root {
  /**
   * Cor de primeiro plano primária
   * Elementos de primeiro plano de maior contraste, como ícones.
   */
  --fg-primary: light-dark(var(--color-gray-900), var(--color-base-white));

  /**
   * Cor de primeiro plano secundária
   * Elementos de primeiro plano de alto contraste, como ícones.
   */
  --fg-secondary: light-dark(var(--color-gray-700), var(--color-gray-300));

  /**
   * Cor de primeiro plano secundária (hover)
   * Elementos de primeiro plano secundário em estado de hover.
   */
  --fg-secondary_hover: light-dark(var(--color-gray-800), var(--color-gray-200));

  /**
   * Cor de primeiro plano terciária
   * Elementos de primeiro plano de contraste médio, como ícones.
   */
  --fg-tertiary: light-dark(var(--color-gray-600), var(--color-gray-400));

  /**
   * Cor de primeiro plano terciária (hover)
   * Elementos de primeiro plano terciário em estado de hover.
   */
  --fg-tertiary_hover: light-dark(var(--color-gray-700), var(--color-gray-300));

  /**
   * Cor de primeiro plano quaternária
   * Elementos de primeiro plano de baixo contraste, como ícones em botões,
   * ícones de ajuda e ícones em campos de entrada.
   */
  --fg-quaternary: light-dark(var(--color-gray-400), var(--color-gray-600));

  /**
   * Cor de primeiro plano quaternária (hover)
   * Elementos de primeiro plano quaternário em estado de hover.
   */
  --fg-quaternary_hover: light-dark(
    var(--color-gray-500),
    var(--color-gray-500)
  );

  /**
   * Cor de primeiro plano branca
   * Elementos de primeiro plano que são sempre brancos, independentemente do modo.
   */
  --fg-white: light-dark(var(--color-base-white), var(--color-base-white));

  /**
   * Cor de primeiro plano desabilitado
   * Cor padrão para elementos de primeiro plano desabilitados, como ícones em
   * botões de grupo desabilitados e itens de menu suspenso de dropdown.
   */
  --fg-disabled: light-dark(var(--color-gray-400), var(--color-gray-500));

  /**
   * Cor de primeiro plano desabilitado sutil
   * Variante de contraste mais baixo para elementos de primeiro plano desabilitados,
   * como ícones em checkboxes e tags de checkbox.
   */
  --fg-disabled_subtle: light-dark(var(--color-gray-300), var(--color-gray-600));

  /**
   * Cor de primeiro plano da marca primária
   * Cor primária da marca para elementos de primeiro plano não textuais,
   * como ícones em destaque e barras de progresso.
   */
  --fg-brand-primary: light-dark(var(--color-brand-600), var(--color-brand-500));

  /**
   * Cor de primeiro plano da marca primária alternativa
   * Alternativa que muda para cinza no modo escuro, útil em elementos como
   * abas horizontais ativas.
   */
  --fg-brand-primary_alt: light-dark(
    var(--color-brand-600),
    var(--color-gray-300)
  );

  /**
   * Cor de primeiro plano da marca secundária
   * Cor secundária da marca para elementos de primeiro plano não textuais,
   * como acentos e setas em seções de marketing (ex. cabeçalhos hero).
   */
  --fg-brand-secondary: light-dark(
    var(--color-brand-500),
    var(--color-brand-500)
  );

  /**
   * Cor de primeiro plano da marca secundária alternativa
   * Alternativa que muda para cinza no modo escuro, útil em botões de marca.
   */
  --fg-brand-secondary_alt: light-dark(
    var(--color-brand-500),
    var(--color-gray-600)
  );

  /**
   * Cor de primeiro plano de erro primária
   * Cor semântica primária de erro para elementos de primeiro plano,
   * como ícones em destaque.
   */
  --fg-error-primary: light-dark(var(--color-error-600), var(--color-error-500));

  /**
   * Cor de primeiro plano de erro secundária
   * Cor semântica secundária de erro para elementos de primeiro plano,
   * como ícones em campos de entrada em estado de erro e gráficos de métricas negativas.
   */
  --fg-error-secondary: light-dark(
    var(--color-error-500),
    var(--color-error-400)
  );

  /**
   * Cor de primeiro plano de aviso primária
   * Cor semântica primária de aviso para elementos de primeiro plano,
   * como ícones em destaque.
   */
  --fg-warning-primary: light-dark(
    var(--color-warning-600),
    var(--color-warning-500)
  );

  /**
   * Cor de primeiro plano de aviso secundária
   * Cor semântica secundária de aviso para elementos de primeiro plano.
   */
  --fg-warning-secondary: light-dark(
    var(--color-warning-500),
    var(--color-warning-400)
  );

  /**
   * Cor de primeiro plano de sucesso primária
   * Cor semântica primária de sucesso para elementos de primeiro plano,
   * como ícones em destaque.
   */
  --fg-success-primary: light-dark(
    var(--color-success-600),
    var(--color-success-500)
  );

  /**
   * Cor de primeiro plano de sucesso secundária
   * Cor semântica secundária de sucesso para elementos de primeiro plano,
   * como indicadores de status (ex. pontos de avatar online) e ícones em
   * gráficos de métricas.
   */
  --fg-success-secondary: light-dark(
    var(--color-success-500),
    var(--color-success-400)
  );
}
:root {
  /**
   * paragraph-max-width
   * Define a largura máxima do texto de parágrafo (ex.: posts de blog),
   * garantindo uma medida otimizada para leitura.
   * Max-width: 720px
   */
  --paragraph-max-width: 720px;
}
:root {
  /**
   * Sombra XS
   * Elevação mínima para superfícies levemente destacadas.
   */
  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);

  /**
   * Sombra SM
   * Elevação sutil para componentes de baixa hierarquia,
   * como menus suspensos e tooltips.
   */
  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px
    rgba(16, 24, 40, 0.06);

  /**
   * Sombra MD
   * Elevação média para elementos como cards e popovers.
   */
  --shadow-md: 0px 4px 6px rgba(16, 24, 40, 0.1), 0px 2px 4px
    rgba(16, 24, 40, 0.06);

  /**
   * Sombra LG
   * Elevação alta para modais e diálogos.
   */
  --shadow-lg: 0px 10px 15px rgba(16, 24, 40, 0.1), 0px 4px 6px
    rgba(16, 24, 40, 0.04);

  /**
   * Sombra XL
   * Elevacao pronunciada para overlays críticos.
   */
  --shadow-xl: 0px 20px 25px rgba(16, 24, 40, 0.1), 0px 10px 10px
    rgba(16, 24, 40, 0.04);

  /**
   * Sombra 2XL
   * Sombra profunda para destaque máximo em camadas superiores.
   */
  --shadow-2xl: 0px 25px 50px rgba(16, 24, 40, 0.25);

  /**
   * Sombra interna
   * Sombra inset para estados ativos ou realces internos.
   */
  --shadow-inner: inset 0px 2px 4px rgba(16, 24, 40, 0.06);

  /**
   * Sem sombra
   * Remove qualquer efeito de sombra.
   */
  --shadow-none: none;
}
:root {
  /**
   * spacing-none
   * Sem espaçamento.
   */
  --spacing-none: 0px;

  /**
   * spacing-xxs
   * Espaçamento extra-extra-pequeno (2px).
   */
  --spacing-xxs: 2px;

  /**
   * spacing-xs
   * Espaçamento extra-pequeno (4px).
   */
  --spacing-xs: 4px;

  /**
   * spacing-sm
   * Espaçamento pequeno (6px).
   */
  --spacing-sm: 6px;

  /**
   * spacing-md
   * Espaçamento médio (8px).
   */
  --spacing-md: 8px;

  /**
   * spacing-lg
   * Espaçamento grande (12px).
   */
  --spacing-lg: 12px;

  /**
   * spacing-xl
   * Espaçamento extra-grande (16px).
   */
  --spacing-xl: 16px;

  /**
   * spacing-2xl
   * Espaçamento 2× extra-grande (20px).
   */
  --spacing-2xl: 20px;

  /**
   * spacing-3xl
   * Espaçamento 3× extra-grande (24px).
   */
  --spacing-3xl: 24px;

  /**
   * spacing-4xl
   * Espaçamento 4× extra-grande (32px).
   */
  --spacing-4xl: 32px;

  /**
   * spacing-5xl
   * Espaçamento 5× extra-grande (40px).
   */
  --spacing-5xl: 40px;

  /**
   * spacing-6xl
   * Espaçamento 6× extra-grande (48px).
   */
  --spacing-6xl: 48px;

  /**
   * spacing-7xl
   * Espaçamento 7× extra-grande (64px).
   */
  --spacing-7xl: 64px;

  /**
   * spacing-8xl
   * Espaçamento 8× extra-grande (80px).
   */
  --spacing-8xl: 80px;

  /**
   * spacing-9xl
   * Espaçamento 9× extra-grande (96px).
   */
  --spacing-9xl: 96px;

  /**
   * spacing-10xl
   * Espaçamento 10× extra-grande (128px).
   */
  --spacing-10xl: 128px;

  /**
   * spacing-11xl
   * Espaçamento 11× extra-grande (160px).
   */
  --spacing-11xl: 160px;
}
:root {
  /**
   * Texto primário
   * Texto principal como títulos de páginas.
   */
  --text-primary: light-dark(var(--color-gray-900), var(--color-gray-50));

  /**
   * Texto primário em fundo de marca
   * Texto primário sobre fundos sólidos da cor da marca.
   */
  --text-primary_on-brand: light-dark(
    var(--color-base-white),
    var(--color-gray-50)
  );

  /**
   * Texto secundário
   * Texto secundário como rótulos e cabeçalhos de seção.
   */
  --text-secondary: light-dark(var(--color-gray-700), var(--color-gray-300));

  /**
   * Texto secundário (hover)
   * Texto secundário em estado de hover.
   */
  --text-secondary_hover: light-dark(
    var(--color-gray-800),
    var(--color-gray-200)
  );

  /**
   * Texto secundário em fundo de marca
   * Texto secundário sobre fundos sólidos da cor da marca.
   */
  --text-secondary_on-brand: light-dark(
    var(--color-brand-200),
    var(--color-gray-300)
  );

  /**
   * Texto terciário
   * Texto terciário como texto de suporte e parágrafos.
   */
  --text-tertiary: light-dark(var(--color-gray-600), var(--color-gray-400));

  /**
   * Texto terciário (hover)
   * Texto terciário em estado de hover.
   */
  --text-tertiary_hover: light-dark(
    var(--color-gray-700),
    var(--color-gray-300)
  );

  /**
   * Texto terciário em fundo de marca
   * Texto terciário sobre fundos sólidos da cor da marca.
   */
  --text-tertiary_on-brand: light-dark(
    var(--color-brand-200),
    var(--color-gray-400)
  );

  /**
   * Texto quaternário
   * Texto quaternário para texto mais sutil, como títulos de colunas de rodapé.
   */
  --text-quaternary: light-dark(var(--color-gray-500), var(--color-gray-400));

  /**
   * Texto quaternário em fundo de marca
   * Texto quaternário sobre fundos sólidos da cor da marca.
   */
  --text-quaternary_on-brand: light-dark(
    var(--color-brand-300),
    var(--color-gray-400)
  );

  /**
   * Texto branco
   * Texto que é sempre branco, independentemente do modo.
   */
  --text-white: light-dark(var(--color-base-white), var(--color-base-white));

  /**
   * Texto desabilitado
   * Cor padrão para texto desabilitado, como inputs e botões desativados.
   */
  --text-disabled: light-dark(var(--color-gray-500), var(--color-gray-500));

  /**
   * Placeholder
   * Cor padrão para texto placeholder, como em campos de formulário.
   */
  --text-placeholder: light-dark(var(--color-gray-500), var(--color-gray-400));

  /**
   * Placeholder (sutil)
   * Versão de menor contraste para texto placeholder, útil em campos de código de verificação.
   */
  --text-placeholder_subtle: light-dark(
    var(--color-gray-300),
    var(--color-gray-700)
  );

  /**
   * Texto primário da marca
   * Texto principal da marca, útil para títulos (ex. cards em cabeçalhos de página de preços).
   */
  --text-brand-primary: light-dark(var(--color-brand-900), var(--color-gray-50));

  /**
   * Texto secundário da marca
   * Texto secundário da marca para botões, textos destacados e subtítulos (ex. subtítulos em cards de blog).
   */
  --text-brand-secondary: light-dark(
    var(--color-brand-700),
    var(--color-gray-300)
  );

  /**
   * Texto secundário da marca (hover)
   * Texto secundário da marca em estado de hover (ex. botões da marca).
   */
  --text-brand-secondary_hover: light-dark(
    var(--color-brand-800),
    var(--color-gray-300)
  );

  /**
   * Texto terciário da marca
   * Texto terciário da marca para realces leves (ex. números em cards métricos).
   */
  --text-brand-tertiary: light-dark(
    var(--color-brand-600),
    var(--color-gray-400)
  );

  /**
   * Texto terciário da marca alternativo
   * Versão mais clara no modo escuro para texto terciário da marca.
   */
  --text-brand-tertiary_alt: light-dark(
    var(--color-brand-600),
    var(--color-gray-50)
  );

  /**
   * Texto de erro primário
   * Cor semântica padrão para texto em estado de erro (ex. erros em campos de formulário).
   */
  --text-error-primary: light-dark(
    var(--color-error-600),
    var(--color-error-400)
  );

  --text-error-primary_hover: light-dark(
    var(--color-error-700),
    var(--color-error-300)
  );

  /**
   * Texto de aviso primário
   * Cor semântica padrão para texto em estado de aviso.
   */
  --text-warning-primary: light-dark(
    var(--color-warning-600),
    var(--color-warning-400)
  );

  --text-warning-primary_hover: light-dark(
    var(--color-warning-700),
    var(--color-warning-300)
  );

  /**
   * Texto de sucesso primário
   * Cor semântica padrão para texto em estado de sucesso.
   */
  --text-success-primary: light-dark(
    var(--color-success-600),
    var(--color-success-400)
  );

  --text-success-primary_hover: light-dark(
    var(--color-success-700),
    var(--color-success-300)
  );
}
:root {
  /**
   * Família de fonte base
   * Fonte principal usada em todo o sistema de design.
   */
  --font-family-base: "Inter", sans-serif;

  /**
   * Peso da fonte Regular
   * Uso geral para textos.
   */
  --font-weight-regular: 400;

  /**
   * Peso da fonte Medium
   * Uso em ênfases leves.
   */
  --font-weight-medium: 500;

  /**
   * Peso da fonte Semibold
   * Uso em títulos secundários.
   */
  --font-weight-semibold: 600;

  /**
   * Peso da fonte Bold
   * Uso em títulos principais e ênfases fortes.
   */
  --font-weight-bold: 700;

  /**
   * Display 2xl
   * Uso: títulos de destaque (hero, banners).
   * font-size: 72px | line-height: 90px | letter-spacing: -2%
   */
  --font-size-display-2xl: 72px;
  --line-height-display-2xl: 90px;
  --letter-spacing-display-2xl: -0.02em;

  /**
   * Display xl
   * Uso: títulos grandes.
   * font-size: 60px | line-height: 72px | letter-spacing: -2%
   */
  --font-size-display-xl: 60px;
  --line-height-display-xl: 72px;
  --letter-spacing-display-xl: -0.02em;

  /**
   * Display lg
   * Uso: títulos médios.
   * font-size: 48px | line-height: 60px | letter-spacing: -2%
   */
  --font-size-display-lg: 48px;
  --line-height-display-lg: 60px;
  --letter-spacing-display-lg: -0.02em;

  /**
   * Display md
   * Uso: sub-títulos.
   * font-size: 36px | line-height: 44px | letter-spacing: -2%
   */
  --font-size-display-md: 36px;
  --line-height-display-md: 44px;
  --letter-spacing-display-md: -0.02em;

  /**
   * Display sm
   * Uso: títulos secundários.
   * font-size: 30px | line-height: 38px | letter-spacing: -2%
   */
  --font-size-display-sm: 30px;
  --line-height-display-sm: 38px;
  --letter-spacing-display-sm: -0.02em;

  /**
   * Display xs
   * Uso: destaques pequenos.
   * font-size: 24px | line-height: 32px | letter-spacing: -2%
   */
  --font-size-display-xs: 24px;
  --line-height-display-xs: 32px;
  --letter-spacing-display-xs: -0.02em;

  /**
   * Text xl
   * Uso: texto de grande ênfase.
   * font-size: 20px | line-height: 30px
   */
  --font-size-text-xl: 20px;
  --line-height-text-xl: 30px;

  /**
   * Text lg
   * Uso: texto destacado.
   * font-size: 18px | line-height: 28px
   */
  --font-size-text-lg: 18px;
  --line-height-text-lg: 28px;

  /**
   * Text md
   * Uso: texto padrão de parágrafo.
   * font-size: 16px | line-height: 24px
   */
  --font-size-text-md: 16px;
  --line-height-text-md: 24px;

  /**
   * Text sm
   * Uso: texto de legenda.
   * font-size: 14px | line-height: 20px
   */
  --font-size-text-sm: 14px;
  --line-height-text-sm: 20px;

  /**
   * Text xs
   * Uso: texto auxiliar.
   * font-size: 12px | line-height: 18px
   */
  --font-size-text-xs: 12px;
  --line-height-text-xs: 18px;
}
:root {
  /**
   * width-xxs
   * Largura extra-extra-pequena (320px) para contêineres muito estreitos.
   */
  --width-xxs: 320px;

  /**
   * width-xs
   * Largura extra-pequena (384px) para pontos de quebra pequenos.
   */
  --width-xs: 384px;

  /**
   * width-sm
   * Largura pequena (480px) para contêineres compactos.
   */
  --width-sm: 480px;

  /**
   * width-md
   * Largura média (560px) para contêineres padrão.
   */
  --width-md: 560px;

  /**
   * width-lg
   * Largura grande (640px) para contêineres amplos.
   */
  --width-lg: 640px;

  /**
   * width-xl
   * Largura extra-grande (768px) para layouts amplos.
   */
  --width-xl: 768px;

  /**
   * width-2xl
   * Largura 2× extra-grande (1024px) para seções de página.
   */
  --width-2xl: 1024px;

  /**
   * width-3xl
   * Largura 3× extra-grande (1280px) para contêineres full-width em telas grandes.
   */
  --width-3xl: 1280px;

  /**
   * width-4xl
   * Largura 4× extra-grande (1440px) para layouts de maior escala.
   */
  --width-4xl: 1440px;

  /**
   * width-5xl
   * Largura 5× extra-grande (1600px) para seções muito amplas.
   */
  --width-5xl: 1600px;

  /**
   * width-6xl
   * Largura 6× extra-grande (1920px) para larguras máximas em telas widescreen.
   */
  --width-6xl: 1920px;
}