/* =============================================================================
 * AlignUI Design System 2.0 — distribuição estática
 * =============================================================================
 * GERADO AUTOMATICAMENTE. Não edite à mão.
 * Origem: DesignSystemGFI/src/styles/*.css
 * Regerar: node scripts/gerar-css-estatico.mjs
 *
 * COMO USAR
 * Carregue ANTES do CSS da página. Depois escreva as classes direto no HTML:
 *
 *   <div class="bg-bg-white-0 rounded-10 shadow-regular-xs">
 *     <p class="text-label-sm text-text-strong-950">Título</p>
 *     <p class="text-paragraph-sm text-text-sub-600">Apoio</p>
 *   </div>
 *
 * DUAS ETAPAS, SEMPRE. O estilo de texto define FORMA (tamanho, entrelinha,
 * peso). O token define COR. Nenhum estilo de texto carrega cor — se você
 * escreveu só `text-label-sm`, o texto herdou a cor de quem está em volta.
 *
 * MODO ESCURO: classe `dark` na raiz do documento. Os tokens invertem
 * sozinhos; nenhuma regra a mais é necessária.
 * TEMA DE MARCA: `theme-purple`, `theme-orange` ou `theme-green` na raiz.
 * Sem classe, o tema é Blue.
 *
 * ⚠️ AS PRIMITIVAS ESTÃO PREFIXADAS com `--ds-` porque `--gray-50` a
 *    `--gray-600` já existem no Verificador com outros valores. Leia sempre da
 *    camada semântica (`--bg-*`, `--text-*`, `--primary-*`), nunca das
 *    primitivas.
 *
 * ⚠️ ESTE ARQUIVO NÃO TEM RESET. Nenhuma regra dele atinge elemento por tag —
 *    só classe. Carregar não muda nada; muda quando você usa.
 *
 * ⚠️ FONTES: declara as famílias, não carrega os arquivos. A página precisa
 *    servir Inter (e DM Mono, se usar o estilo Docs).
 *
 * Ícones: RemixIcon, exige atribuição visível. Ver NOTICE.
 * ========================================================================== */


/* =============================================================================
 * 06-Foundations — primitivas
 * =============================================================================
 * ⚠️ Só os 9 tons base (passo 500) vieram verificados da biblioteca. Os demais
 *    degraus e as duas famílias de neutro são DERIVADOS e ainda precisam ser
 *    conferidos contra o Figma.
 * ========================================================================== */
:root {
  /* ---- Neutral / Gray ---- */
  --ds-gray-0: #ffffff;
  --ds-gray-50: #f5f7fa;
  --ds-gray-100: #f2f5f8;
  --ds-gray-200: #e1e4ea;
  --ds-gray-300: #cacfd8;
  --ds-gray-400: #99a0ae;
  --ds-gray-500: #717784;
  --ds-gray-600: #525866;
  --ds-gray-700: #2b303b;
  --ds-gray-800: #222530;
  --ds-gray-900: #181b25;
  --ds-gray-950: #0e121b;

  /* ---- Neutral / Slate ---- */
  --ds-slate-0: #ffffff;
  --ds-slate-50: #f6f8fa;
  --ds-slate-100: #eceff3;
  --ds-slate-200: #e0e4ea;
  --ds-slate-300: #c2c7d0;
  --ds-slate-400: #949cab;
  --ds-slate-500: #6b7382;
  --ds-slate-600: #4f5764;
  --ds-slate-700: #2f3542;
  --ds-slate-800: #232830;
  --ds-slate-900: #171b23;
  --ds-slate-950: #0a0d14;

  /* ---- Blue (base verificado: 500) ---- */
  --ds-blue-50: #ebf1ff;
  --ds-blue-100: #d5e2ff;
  --ds-blue-200: #c0d5ff;
  --ds-blue-300: #97b7ff;
  --ds-blue-400: #6895ff;
  --ds-blue-500: #335cff;
  --ds-blue-600: #3559e9;
  --ds-blue-700: #2547d0;
  --ds-blue-800: #1f3aad;
  --ds-blue-900: #182f8a;
  --ds-blue-950: #122368;

  /* ---- Orange (base verificado: 500) ---- */
  --ds-orange-50: #fef3eb;
  --ds-orange-100: #ffe6d5;
  --ds-orange-200: #ffd5c0;
  --ds-orange-300: #ffb896;
  --ds-orange-400: #ff9147;
  --ds-orange-500: #fa7319;
  --ds-orange-600: #e26a17;
  --ds-orange-700: #c25c14;
  --ds-orange-800: #a34d11;
  --ds-orange-900: #833e0d;
  --ds-orange-950: #66300a;

  /* ---- Red (base verificado: 500) ---- */
  --ds-red-50: #fff0f3;
  --ds-red-100: #ffd5dc;
  --ds-red-200: #ffc0cb;
  --ds-red-300: #ff9ba8;
  --ds-red-400: #ff6a7f;
  --ds-red-500: #fb3748;
  --ds-red-600: #e93544;
  --ds-red-700: #d02533;
  --ds-red-800: #ad1f2b;
  --ds-red-900: #8a1822;
  --ds-red-950: #681219;

  /* ---- Green (base verificado: 500) ---- */
  --ds-green-50: #effaf6;
  --ds-green-100: #d0fbe9;
  --ds-green-200: #c2f5da;
  --ds-green-300: #92e6bd;
  --ds-green-400: #5cd39c;
  --ds-green-500: #1fc16b;
  --ds-green-600: #1daf61;
  --ds-green-700: #178c4e;
  --ds-green-800: #12753f;
  --ds-green-900: #0e5e33;
  --ds-green-950: #0b4626;

  /* ---- Yellow (base verificado: 500) ---- */
  --ds-yellow-50: #fffbeb;
  --ds-yellow-100: #fff1c2;
  --ds-yellow-200: #ffe9a3;
  --ds-yellow-300: #ffdb70;
  --ds-yellow-400: #ffc94a;
  --ds-yellow-500: #f6b51e;
  --ds-yellow-600: #e6a51c;
  --ds-yellow-700: #c68a17;
  --ds-yellow-800: #a67413;
  --ds-yellow-900: #855c0f;
  --ds-yellow-950: #64460b;

  /* ---- Purple (base verificado: 500) ---- */
  --ds-purple-50: #efebff;
  --ds-purple-100: #dcd5ff;
  --ds-purple-200: #cac0ff;
  --ds-purple-300: #a897ff;
  --ds-purple-400: #9077ff;
  --ds-purple-500: #7d52f4;
  --ds-purple-600: #6e3ff5;
  --ds-purple-700: #5b2cd4;
  --ds-purple-800: #4c25b0;
  --ds-purple-900: #3d1e8d;
  --ds-purple-950: #2e166a;

  /* ---- Sky (base verificado: 500) ---- */
  --ds-sky-50: #ebf8ff;
  --ds-sky-100: #d5f1ff;
  --ds-sky-200: #c0eaff;
  --ds-sky-300: #97dcff;
  --ds-sky-400: #68cdff;
  --ds-sky-500: #47c2ff;
  --ds-sky-600: #3fb0e9;
  --ds-sky-700: #2f92c4;
  --ds-sky-800: #2679a3;
  --ds-sky-900: #1e6082;
  --ds-sky-950: #164861;

  /* ---- Pink (base verificado: 500) ---- */
  --ds-pink-50: #ffebf4;
  --ds-pink-100: #ffd5e7;
  --ds-pink-200: #ffc0da;
  --ds-pink-300: #ff97c2;
  --ds-pink-400: #ff6ba9;
  --ds-pink-500: #fb4ba3;
  --ds-pink-600: #e73d92;
  --ds-pink-700: #c42d7a;
  --ds-pink-800: #a32565;
  --ds-pink-900: #831e51;
  --ds-pink-950: #62163d;

  /* ---- Teal (base verificado: 500) ---- */
  --ds-teal-50: #ebfbf8;
  --ds-teal-100: #d5f7f1;
  --ds-teal-200: #c0f3ea;
  --ds-teal-300: #97ead9;
  --ds-teal-400: #5ce0c6;
  --ds-teal-500: #22d3bb;
  --ds-teal-600: #1ebfa9;
  --ds-teal-700: #199f8d;
  --ds-teal-800: #148274;
  --ds-teal-900: #10685c;
  --ds-teal-950: #0c4e45;
}


/* =============================================================================
 * Camada semântica — é daqui que se lê a cor
 * ========================================================================== */
:root {
  /* ---------------------------------------------------------------------
   * 02-Neutral — seletor de família neutra (padrão: Gray)
   * ------------------------------------------------------------------ */
  --neutral-0: var(--ds-gray-0);
  --neutral-50: var(--ds-gray-50);
  --neutral-100: var(--ds-gray-100);
  --neutral-200: var(--ds-gray-200);
  --neutral-300: var(--ds-gray-300);
  --neutral-400: var(--ds-gray-400);
  --neutral-500: var(--ds-gray-500);
  --neutral-600: var(--ds-gray-600);
  --neutral-700: var(--ds-gray-700);
  --neutral-800: var(--ds-gray-800);
  --neutral-900: var(--ds-gray-900);
  --neutral-950: var(--ds-gray-950);

  /* ---------------------------------------------------------------------
   * bg/* — superfícies e preenchimentos
   * ------------------------------------------------------------------ */
  --bg-strong-950: var(--neutral-950);
  --bg-surface-800: var(--neutral-800);
  --bg-sub-300: var(--neutral-300);
  --bg-soft-200: var(--neutral-200);
  --bg-weak-50: var(--neutral-50);
  --bg-weak-25: var(--neutral-50); /* idêntico a weak-50 no Light */
  --bg-white-0: var(--neutral-0);

  /* ---------------------------------------------------------------------
   * text/*
   * ------------------------------------------------------------------ */
  --text-strong-950: var(--neutral-950);
  --text-sub-600: var(--neutral-600);
  --text-soft-400: var(--neutral-400);
  --text-disabled-300: var(--neutral-300);
  --text-white-0: var(--neutral-0);

  /* ---------------------------------------------------------------------
   * stroke/*
   * ------------------------------------------------------------------ */
  --stroke-strong-950: var(--neutral-950);
  --stroke-sub-300: var(--neutral-300);
  --stroke-soft-200: var(--neutral-200);
  --stroke-white-0: var(--neutral-0);

  /* ---------------------------------------------------------------------
   * icon/*
   * ------------------------------------------------------------------ */
  --icon-strong-950: var(--neutral-950);
  --icon-sub-600: var(--neutral-600);
  --icon-soft-400: var(--neutral-400);
  --icon-disabled-300: var(--neutral-300);
  --icon-white-0: var(--neutral-0);

  /* ---------------------------------------------------------------------
   * state/* — escolha pelo SIGNIFICADO, nunca pela cor
   * ------------------------------------------------------------------ */
  --state-faded-dark: var(--neutral-800);
  --state-faded-base: var(--neutral-500);
  --state-faded-light: var(--neutral-200);
  --state-faded-lighter: var(--neutral-50);

  --state-information-dark: var(--ds-blue-950);
  --state-information-base: var(--ds-blue-500);
  --state-information-light: var(--ds-blue-200);
  --state-information-lighter: var(--ds-blue-50);

  --state-warning-dark: var(--ds-orange-950);
  --state-warning-base: var(--ds-orange-500);
  --state-warning-light: var(--ds-orange-200);
  --state-warning-lighter: var(--ds-orange-50);

  --state-error-dark: var(--ds-red-950);
  --state-error-base: var(--ds-red-500);
  --state-error-light: var(--ds-red-200);
  --state-error-lighter: var(--ds-red-50);

  --state-success-dark: var(--ds-green-950);
  --state-success-base: var(--ds-green-500);
  --state-success-light: var(--ds-green-200);
  --state-success-lighter: var(--ds-green-50);

  --state-away-dark: var(--ds-yellow-950);
  --state-away-base: var(--ds-yellow-500);
  --state-away-light: var(--ds-yellow-200);
  --state-away-lighter: var(--ds-yellow-50);

  --state-feature-dark: var(--ds-purple-950);
  --state-feature-base: var(--ds-purple-500);
  --state-feature-light: var(--ds-purple-200);
  --state-feature-lighter: var(--ds-purple-50);

  --state-verified-dark: var(--ds-sky-950);
  --state-verified-base: var(--ds-sky-500);
  --state-verified-light: var(--ds-sky-200);
  --state-verified-lighter: var(--ds-sky-50);

  --state-highlighted-dark: var(--ds-pink-950);
  --state-highlighted-base: var(--ds-pink-500);
  --state-highlighted-light: var(--ds-pink-200);
  --state-highlighted-lighter: var(--ds-pink-50);

  --state-stable-dark: var(--ds-teal-950);
  --state-stable-base: var(--ds-teal-500);
  --state-stable-light: var(--ds-teal-200);
  --state-stable-lighter: var(--ds-teal-50);

  /* ---------------------------------------------------------------------
   * static/* — NÃO invertem no dark. Use sobre fundo colorido ou foto.
   * ------------------------------------------------------------------ */
  --static-black: #0e121b;
  --static-white: #ffffff;

  /* ---------------------------------------------------------------------
   * overlay/* — scrim de modal e drawer
   * ------------------------------------------------------------------ */
  --overlay: rgb(14 18 27 / 0.24);
  --overlay-white: rgb(255 255 255 / 1);
  --overlay-white-0: rgb(255 255 255 / 0);

  /* ---------------------------------------------------------------------
   * illustration/* — arte de apoio e empty state. Fora da escala de UI.
   * ------------------------------------------------------------------ */
  --illustration-strong-400: var(--neutral-400);
  --illustration-sub-300: var(--neutral-300);
  --illustration-soft-200: var(--neutral-200);
  --illustration-weak-100: var(--neutral-100);
  --illustration-white-0: var(--neutral-0);

  /* ---------------------------------------------------------------------
   * social/* — SOMENTE botões de login social
   * ------------------------------------------------------------------ */
  --social-apple: #000000;
  --social-twitter: #000000;
  --social-github: #24292f;
  --social-notion: #000000;
  --social-tidal: #000000;
  --social-amazon: #ff9900;
  --social-zendesk: #03363d;

  /* ---------------------------------------------------------------------
   * 03-Theme — marca (padrão: Blue)
   * ------------------------------------------------------------------ */
  --primary-darkest: var(--ds-blue-950);
  --primary-dark: var(--ds-blue-700);
  --primary-base: var(--ds-blue-500);
  --primary-light: var(--ds-blue-200);
  --primary-lighter: var(--ds-blue-50);

  --primary-alpha-24: rgb(51 92 255 / 0.24);
  --primary-alpha-16: rgb(51 92 255 / 0.16);
  --primary-alpha-10: rgb(51 92 255 / 0.10);

  /* ---------------------------------------------------------------------
   * 04-Radius
   * ------------------------------------------------------------------ */
  --r-0: 0px;
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-28: 28px;
  --r-full: 9999px;
}

/* =============================================================================
 * Neutro alternativo: Slate
 * ========================================================================== */
.neutral-slate {
  --neutral-0: var(--ds-slate-0);
  --neutral-50: var(--ds-slate-50);
  --neutral-100: var(--ds-slate-100);
  --neutral-200: var(--ds-slate-200);
  --neutral-300: var(--ds-slate-300);
  --neutral-400: var(--ds-slate-400);
  --neutral-500: var(--ds-slate-500);
  --neutral-600: var(--ds-slate-600);
  --neutral-700: var(--ds-slate-700);
  --neutral-800: var(--ds-slate-800);
  --neutral-900: var(--ds-slate-900);
  --neutral-950: var(--ds-slate-950);
}

/* =============================================================================
 * Temas de marca alternativos
 * ========================================================================== */
.theme-purple {
  --primary-darkest: var(--ds-purple-950);
  --primary-dark: var(--ds-purple-700);
  --primary-base: var(--ds-purple-500);
  --primary-light: var(--ds-purple-200);
  --primary-lighter: var(--ds-purple-50);
  --primary-alpha-24: rgb(125 82 244 / 0.24);
  --primary-alpha-16: rgb(125 82 244 / 0.16);
  --primary-alpha-10: rgb(125 82 244 / 0.10);
}

.theme-orange {
  --primary-darkest: var(--ds-orange-950);
  --primary-dark: var(--ds-orange-700);
  --primary-base: var(--ds-orange-500);
  --primary-light: var(--ds-orange-200);
  --primary-lighter: var(--ds-orange-50);
  /* ⚠️ Armadilha conhecida: no Figma o alpha-10 do tema Orange aponta para
     alpha-16. Reproduzido aqui para fidelidade. */
  --primary-alpha-24: rgb(250 115 25 / 0.24);
  --primary-alpha-16: rgb(250 115 25 / 0.16);
  --primary-alpha-10: rgb(250 115 25 / 0.16);
}

.theme-green {
  --primary-darkest: var(--ds-green-950);
  --primary-dark: var(--ds-green-700);
  --primary-base: var(--ds-green-500);
  --primary-light: var(--ds-green-200);
  --primary-lighter: var(--ds-green-50);
  --primary-alpha-24: rgb(31 193 107 / 0.24);
  --primary-alpha-16: rgb(31 193 107 / 0.16);
  --primary-alpha-10: rgb(31 193 107 / 0.10);
}

/* =============================================================================
 * Modo escuro — inversão da escala + state light/lighter viram alpha overlays
 * ========================================================================== */
.dark {
  --bg-strong-950: var(--neutral-0);
  --bg-surface-800: var(--neutral-200);
  --bg-sub-300: var(--neutral-600);
  --bg-soft-200: var(--neutral-700);
  --bg-weak-50: var(--neutral-800);
  --bg-weak-25: var(--neutral-900);
  --bg-white-0: var(--neutral-950);

  --text-strong-950: var(--neutral-0);
  --text-sub-600: var(--neutral-400);
  --text-soft-400: var(--neutral-500);
  --text-disabled-300: var(--neutral-600);
  --text-white-0: var(--neutral-950);

  --stroke-strong-950: var(--neutral-0);
  --stroke-sub-300: var(--neutral-600);
  --stroke-soft-200: var(--neutral-700);
  --stroke-white-0: var(--neutral-950);

  --icon-strong-950: var(--neutral-0);
  --icon-sub-600: var(--neutral-400);
  --icon-soft-400: var(--neutral-500);
  --icon-disabled-300: var(--neutral-600);
  --icon-white-0: var(--neutral-950);

  /* state/*: `dark` sobe para o degrau 400; `light`/`lighter` viram alpha */
  --state-faded-dark: var(--neutral-400);
  --state-faded-light: rgb(153 160 174 / 0.24);
  --state-faded-lighter: rgb(153 160 174 / 0.10);

  --state-information-dark: var(--ds-blue-400);
  --state-information-light: rgb(51 92 255 / 0.24);
  --state-information-lighter: rgb(51 92 255 / 0.10);

  --state-warning-dark: var(--ds-orange-400);
  --state-warning-light: rgb(250 115 25 / 0.24);
  --state-warning-lighter: rgb(250 115 25 / 0.10);

  --state-error-dark: var(--ds-red-400);
  --state-error-light: rgb(251 55 72 / 0.24);
  --state-error-lighter: rgb(251 55 72 / 0.10);

  --state-success-dark: var(--ds-green-400);
  --state-success-light: rgb(31 193 107 / 0.24);
  --state-success-lighter: rgb(31 193 107 / 0.10);

  --state-away-dark: var(--ds-yellow-400);
  --state-away-light: rgb(246 181 30 / 0.24);
  --state-away-lighter: rgb(246 181 30 / 0.10);

  --state-feature-dark: var(--ds-purple-400);
  --state-feature-light: rgb(125 82 244 / 0.24);
  --state-feature-lighter: rgb(125 82 244 / 0.10);

  --state-verified-dark: var(--ds-sky-400);
  --state-verified-light: rgb(71 194 255 / 0.24);
  --state-verified-lighter: rgb(71 194 255 / 0.10);

  --state-highlighted-dark: var(--ds-pink-400);
  --state-highlighted-light: rgb(251 75 163 / 0.24);
  --state-highlighted-lighter: rgb(251 75 163 / 0.10);

  --state-stable-dark: var(--ds-teal-400);
  --state-stable-light: rgb(34 211 187 / 0.24);
  --state-stable-lighter: rgb(34 211 187 / 0.10);

  /* primary sobe um degrau no dark */
  --primary-base: var(--ds-blue-400);
  --primary-dark: var(--ds-blue-500);

  /* `light` e `lighter` viram alpha overlays, exatamente como os state/*.
     Sem isto eles ficariam nos degraus 200 e 50 — claros — e qualquer coisa
     que os use como FUNDO no escuro recebe texto claro sobre fundo claro.
     Foi o que aconteceu com a linha selecionada da tabela: 1,13:1. */
  --primary-light: rgb(104 149 255 / 0.24);
  --primary-lighter: rgb(104 149 255 / 0.10);

  --illustration-strong-400: var(--neutral-500);
  --illustration-sub-300: var(--neutral-600);
  --illustration-soft-200: var(--neutral-700);
  --illustration-weak-100: var(--neutral-800);
  --illustration-white-0: var(--neutral-950);
}

.dark.theme-purple {
  --primary-base: var(--ds-purple-400);
  --primary-dark: var(--ds-purple-500);
  --primary-light: rgb(144 119 255 / 0.24);
  --primary-lighter: rgb(144 119 255 / 0.10);
}
.dark.theme-orange {
  --primary-base: var(--ds-orange-400);
  --primary-dark: var(--ds-orange-500);
  --primary-light: rgb(255 145 71 / 0.24);
  --primary-lighter: rgb(255 145 71 / 0.10);
}
.dark.theme-green {
  --primary-base: var(--ds-green-400);
  --primary-dark: var(--ds-green-500);
  --primary-light: rgb(92 211 156 / 0.24);
  --primary-lighter: rgb(92 211 156 / 0.10);
}


/* =============================================================================
 * Sombras
 * ========================================================================== */
:root {
  /* ---- regular-shadow — os dois de uso corrente ---- */
  --shadow-regular-xs: 0 1px 2px 0 rgb(10 13 20 / 0.03);
  --shadow-regular-md: 0 16px 32px -12px rgb(14 18 27 / 0.10);

  /* ---- custom-shadows — empilhamento multicamada ---- */
  --shadow-custom-xs:
    0 0 0 1px var(--state-faded-lighter),
    0 1px 1px 0 rgb(14 18 27 / 0.04),
    0 2px 2px -1px rgb(14 18 27 / 0.03),
    0 3px 3px -2px rgb(14 18 27 / 0.02),
    0 4px 4px -3px rgb(14 18 27 / 0.02);

  --shadow-custom-md:
    0 0 0 1px var(--state-faded-lighter),
    0 1px 1px 0 rgb(14 18 27 / 0.04),
    0 2px 4px -1px rgb(14 18 27 / 0.03),
    0 6px 8px -2px rgb(14 18 27 / 0.03),
    0 12px 16px -4px rgb(14 18 27 / 0.03),
    0 20px 24px -8px rgb(14 18 27 / 0.03),
    0 32px 40px -12px rgb(14 18 27 / 0.03),
    0 48px 56px -16px rgb(14 18 27 / 0.03);

  --shadow-custom-lg:
    0 1px 1px 0 rgb(14 18 27 / 0.04),
    0 2px 4px -1px rgb(14 18 27 / 0.03),
    0 6px 8px -2px rgb(14 18 27 / 0.03),
    0 12px 16px -4px rgb(14 18 27 / 0.03),
    0 24px 32px -8px rgb(14 18 27 / 0.03),
    0 40px 48px -12px rgb(14 18 27 / 0.03),
    0 56px 64px -16px rgb(14 18 27 / 0.03),
    0 72px 80px -20px rgb(14 18 27 / 0.03),
    0 96px 104px -24px rgb(14 18 27 / 0.03);

  /* ---- components/* — NÃO use fora do componente correspondente ---- */

  /* Botão: hover REDUZ a sombra. É intencional no AlignUI. */
  --shadow-button:
    0 0 0 1px rgb(14 18 27 / 0.08),
    0 1px 2px 0 rgb(14 18 27 / 0.06),
    0 3px 4px -2px rgb(14 18 27 / 0.04),
    0 6px 8px -3px rgb(14 18 27 / 0.03),
    inset 0 1px 0 0 rgb(255 255 255 / 0.12);
  --shadow-button-hover: 0 0 0 1px rgb(14 18 27 / 0.08);

  /* Campo de entrada */
  --shadow-input:
    0 0 0 1px var(--stroke-soft-200),
    0 1px 2px 0 rgb(14 18 27 / 0.04),
    0 2px 4px -1px rgb(14 18 27 / 0.02);
  --shadow-input-hover: 0 0 0 1px var(--stroke-sub-300);
  --shadow-input-active:
    0 0 0 1.4px var(--primary-base),
    0 1px 2px 0 rgb(14 18 27 / 0.04),
    0 2px 4px -1px rgb(14 18 27 / 0.02),
    0 0 0 4px var(--primary-alpha-10);

  /* Anéis de foco — requisito de acessibilidade, nunca remova.
     Dois níveis: anel branco de 2px por dentro, colorido de 4px por fora. */
  --shadow-focus-primary:
    0 0 0 2px var(--bg-white-0),
    0 0 0 4px var(--primary-alpha-10);
  --shadow-focus-important:
    0 0 0 2px var(--bg-white-0),
    0 0 0 4px rgb(83 88 98 / 0.16);
  --shadow-focus-error:
    0 0 0 2px var(--bg-white-0),
    0 0 0 4px rgb(251 55 72 / 0.10);

  /* Fancy buttons — preenchidos com anel da própria cor */
  --shadow-fancy-neutral:
    0 0 0 1px var(--bg-strong-950),
    inset 0 1px 0 0 rgb(255 255 255 / 0.16);
  --shadow-fancy-primary:
    0 0 0 1px var(--primary-base),
    inset 0 1px 0 0 rgb(255 255 255 / 0.16);
  --shadow-fancy-error:
    0 0 0 1px var(--state-error-base),
    inset 0 1px 0 0 rgb(255 255 255 / 0.16);
  --shadow-fancy-stroke:
    0 0 0 1px var(--stroke-soft-200),
    inset 0 1px 0 0 rgb(255 255 255 / 0.16);

  /* Switch */
  --shadow-toggle:
    0 6px 10px 0 rgb(14 18 27 / 0.06),
    0 2px 4px 0 rgb(14 18 27 / 0.03);

  /* Tooltip — traz anel próprio, não some um stroke por cima */
  --shadow-tooltip:
    0 0 0 1px var(--stroke-soft-200),
    0 1px 1px 0 rgb(14 18 27 / 0.04),
    0 2px 4px -1px rgb(14 18 27 / 0.03),
    0 6px 8px -2px rgb(14 18 27 / 0.03),
    0 12px 16px -4px rgb(14 18 27 / 0.03),
    0 20px 24px -8px rgb(14 18 27 / 0.03),
    0 32px 40px -12px rgb(14 18 27 / 0.03),
    0 48px 56px -16px rgb(14 18 27 / 0.03);
}

/* No escuro a sombra preta não aparece: elevação passa a ser comunicada
   por borda, seguindo o que os estilos tokenizados do Figma já fazem. */
.dark {
  --shadow-regular-xs: 0 0 0 1px var(--stroke-soft-200);
  --shadow-regular-md:
    0 0 0 1px var(--stroke-soft-200),
    0 16px 32px -12px rgb(0 0 0 / 0.40);
  --shadow-button: 0 0 0 1px var(--stroke-soft-200);
  --shadow-button-hover: 0 0 0 1px var(--stroke-sub-300);
  --shadow-input: 0 0 0 1px var(--stroke-soft-200);
  --shadow-input-hover: 0 0 0 1px var(--stroke-sub-300);
}


/* =============================================================================
 * Famílias tipográficas
 * ========================================================================== */
:root {
  /* Fontes. Inter Display e Inter Variable caem para Inter — ver typography.css */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =============================================================================
 * Estilos de texto — 34 classes
 * ========================================================================== */
.text-title-h1 { font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 64px; letter-spacing: -0.01em; }
.text-title-h2 { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 56px; letter-spacing: -0.01em; }
.text-title-h3 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; }
.text-title-h4 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.005em; }
.text-title-h5 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: 0; }
.text-title-h6 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: 0; }
.text-landing-h1 { font-family: var(--font-sans); font-weight: 500; font-size: 56px; line-height: 64px; letter-spacing: -0.01em; }
.text-landing-h2 { font-family: var(--font-sans); font-weight: 500; font-size: 48px; line-height: 56px; letter-spacing: -0.01em; }
.text-landing-h3 { font-family: var(--font-sans); font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; }
.text-landing-h4 { font-family: var(--font-sans); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.005em; }
.text-landing-h5 { font-family: var(--font-sans); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.005em; }
.text-landing-h6 { font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.006em; }
.text-label-xl { font-family: var(--font-sans); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.015em; }
.text-label-lg { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.015em; }
.text-label-md { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.011em; }
.text-label-sm { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.006em; }
.text-label-cp { font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: -0.006em; }
.text-label-xs { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.text-paragraph-xl { font-family: var(--font-sans); font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.015em; }
.text-paragraph-lg { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: -0.015em; }
.text-paragraph-md { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.011em; }
.text-paragraph-sm { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.006em; }
.text-paragraph-cp { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: -0.006em; }
.text-paragraph-xs { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.text-subheading-md { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.text-subheading-sm { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; }
.text-subheading-xs { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.text-subheading-2xs { font-family: var(--font-sans); font-weight: 500; font-size: 11px; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.text-docs-label { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 32px; letter-spacing: -0.015em; }
.text-docs-paragraph { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 32px; letter-spacing: -0.015em; }
.text-mono-md { font-family: var(--font-mono); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0; text-transform: uppercase; }
.text-mono-sm { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: uppercase; }
.text-mono-xs { font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: uppercase; }
.text-mono-2xs { font-family: var(--font-mono); font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: 0; text-transform: uppercase; }

/* =============================================================================
 * Sombras como classe
 * ========================================================================== */
.shadow-regular-xs { box-shadow: var(--shadow-regular-xs); }
.shadow-regular-md { box-shadow: var(--shadow-regular-md); }
.shadow-custom-xs { box-shadow: var(--shadow-custom-xs); }
.shadow-custom-md { box-shadow: var(--shadow-custom-md); }
.shadow-custom-lg { box-shadow: var(--shadow-custom-lg); }
.shadow-button { box-shadow: var(--shadow-button); }
.shadow-button-hover { box-shadow: var(--shadow-button-hover); }
.shadow-input { box-shadow: var(--shadow-input); }
.shadow-input-hover { box-shadow: var(--shadow-input-hover); }
.shadow-input-active { box-shadow: var(--shadow-input-active); }
.shadow-focus-primary { box-shadow: var(--shadow-focus-primary); }
.shadow-focus-important { box-shadow: var(--shadow-focus-important); }
.shadow-focus-error { box-shadow: var(--shadow-focus-error); }
.shadow-fancy-neutral { box-shadow: var(--shadow-fancy-neutral); }
.shadow-fancy-primary { box-shadow: var(--shadow-fancy-primary); }
.shadow-fancy-error { box-shadow: var(--shadow-fancy-error); }
.shadow-fancy-stroke { box-shadow: var(--shadow-fancy-stroke); }
.shadow-toggle { box-shadow: var(--shadow-toggle); }
.shadow-tooltip { box-shadow: var(--shadow-tooltip); }

/* =============================================================================
 * Raio
 * ========================================================================== */
.rounded-0 { border-radius: var(--r-0); }
.rounded-2 { border-radius: var(--r-2); }
.rounded-4 { border-radius: var(--r-4); }
.rounded-6 { border-radius: var(--r-6); }
.rounded-8 { border-radius: var(--r-8); }
.rounded-10 { border-radius: var(--r-10); }
.rounded-12 { border-radius: var(--r-12); }
.rounded-16 { border-radius: var(--r-16); }
.rounded-20 { border-radius: var(--r-20); }
.rounded-24 { border-radius: var(--r-24); }
.rounded-28 { border-radius: var(--r-28); }
.rounded-full { border-radius: var(--r-full); }

/* =============================================================================
 * Cor — 86 tokens x 4 propriedades
 * =============================================================================
 * O nome da classe repete o do token de propósito: `bg-bg-white-0` é feio e
 * é o mesmo nome que o pacote React gera. Divergir aqui criaria dois
 * vocabulários para a mesma coisa.
 * ========================================================================== */

/* ---- background-color ---- */
.bg-bg-strong-950 { background-color: var(--bg-strong-950); }
.bg-bg-surface-800 { background-color: var(--bg-surface-800); }
.bg-bg-sub-300 { background-color: var(--bg-sub-300); }
.bg-bg-soft-200 { background-color: var(--bg-soft-200); }
.bg-bg-weak-50 { background-color: var(--bg-weak-50); }
.bg-bg-weak-25 { background-color: var(--bg-weak-25); }
.bg-bg-white-0 { background-color: var(--bg-white-0); }
.bg-text-strong-950 { background-color: var(--text-strong-950); }
.bg-text-sub-600 { background-color: var(--text-sub-600); }
.bg-text-soft-400 { background-color: var(--text-soft-400); }
.bg-text-disabled-300 { background-color: var(--text-disabled-300); }
.bg-text-white-0 { background-color: var(--text-white-0); }
.bg-stroke-strong-950 { background-color: var(--stroke-strong-950); }
.bg-stroke-sub-300 { background-color: var(--stroke-sub-300); }
.bg-stroke-soft-200 { background-color: var(--stroke-soft-200); }
.bg-stroke-white-0 { background-color: var(--stroke-white-0); }
.bg-icon-strong-950 { background-color: var(--icon-strong-950); }
.bg-icon-sub-600 { background-color: var(--icon-sub-600); }
.bg-icon-soft-400 { background-color: var(--icon-soft-400); }
.bg-icon-disabled-300 { background-color: var(--icon-disabled-300); }
.bg-icon-white-0 { background-color: var(--icon-white-0); }
.bg-state-faded-dark { background-color: var(--state-faded-dark); }
.bg-state-faded-base { background-color: var(--state-faded-base); }
.bg-state-faded-light { background-color: var(--state-faded-light); }
.bg-state-faded-lighter { background-color: var(--state-faded-lighter); }
.bg-state-information-dark { background-color: var(--state-information-dark); }
.bg-state-information-base { background-color: var(--state-information-base); }
.bg-state-information-light { background-color: var(--state-information-light); }
.bg-state-information-lighter { background-color: var(--state-information-lighter); }
.bg-state-warning-dark { background-color: var(--state-warning-dark); }
.bg-state-warning-base { background-color: var(--state-warning-base); }
.bg-state-warning-light { background-color: var(--state-warning-light); }
.bg-state-warning-lighter { background-color: var(--state-warning-lighter); }
.bg-state-error-dark { background-color: var(--state-error-dark); }
.bg-state-error-base { background-color: var(--state-error-base); }
.bg-state-error-light { background-color: var(--state-error-light); }
.bg-state-error-lighter { background-color: var(--state-error-lighter); }
.bg-state-success-dark { background-color: var(--state-success-dark); }
.bg-state-success-base { background-color: var(--state-success-base); }
.bg-state-success-light { background-color: var(--state-success-light); }
.bg-state-success-lighter { background-color: var(--state-success-lighter); }
.bg-state-away-dark { background-color: var(--state-away-dark); }
.bg-state-away-base { background-color: var(--state-away-base); }
.bg-state-away-light { background-color: var(--state-away-light); }
.bg-state-away-lighter { background-color: var(--state-away-lighter); }
.bg-state-feature-dark { background-color: var(--state-feature-dark); }
.bg-state-feature-base { background-color: var(--state-feature-base); }
.bg-state-feature-light { background-color: var(--state-feature-light); }
.bg-state-feature-lighter { background-color: var(--state-feature-lighter); }
.bg-state-verified-dark { background-color: var(--state-verified-dark); }
.bg-state-verified-base { background-color: var(--state-verified-base); }
.bg-state-verified-light { background-color: var(--state-verified-light); }
.bg-state-verified-lighter { background-color: var(--state-verified-lighter); }
.bg-state-highlighted-dark { background-color: var(--state-highlighted-dark); }
.bg-state-highlighted-base { background-color: var(--state-highlighted-base); }
.bg-state-highlighted-light { background-color: var(--state-highlighted-light); }
.bg-state-highlighted-lighter { background-color: var(--state-highlighted-lighter); }
.bg-state-stable-dark { background-color: var(--state-stable-dark); }
.bg-state-stable-base { background-color: var(--state-stable-base); }
.bg-state-stable-light { background-color: var(--state-stable-light); }
.bg-state-stable-lighter { background-color: var(--state-stable-lighter); }
.bg-static-black { background-color: var(--static-black); }
.bg-static-white { background-color: var(--static-white); }
.bg-overlay { background-color: var(--overlay); }
.bg-overlay-white { background-color: var(--overlay-white); }
.bg-overlay-white-0 { background-color: var(--overlay-white-0); }
.bg-illustration-strong-400 { background-color: var(--illustration-strong-400); }
.bg-illustration-sub-300 { background-color: var(--illustration-sub-300); }
.bg-illustration-soft-200 { background-color: var(--illustration-soft-200); }
.bg-illustration-weak-100 { background-color: var(--illustration-weak-100); }
.bg-illustration-white-0 { background-color: var(--illustration-white-0); }
.bg-social-apple { background-color: var(--social-apple); }
.bg-social-twitter { background-color: var(--social-twitter); }
.bg-social-github { background-color: var(--social-github); }
.bg-social-notion { background-color: var(--social-notion); }
.bg-social-tidal { background-color: var(--social-tidal); }
.bg-social-amazon { background-color: var(--social-amazon); }
.bg-social-zendesk { background-color: var(--social-zendesk); }
.bg-primary-darkest { background-color: var(--primary-darkest); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-primary-base { background-color: var(--primary-base); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-primary-lighter { background-color: var(--primary-lighter); }
.bg-primary-alpha-24 { background-color: var(--primary-alpha-24); }
.bg-primary-alpha-16 { background-color: var(--primary-alpha-16); }
.bg-primary-alpha-10 { background-color: var(--primary-alpha-10); }

/* ---- color ---- */
.text-bg-strong-950 { color: var(--bg-strong-950); }
.text-bg-surface-800 { color: var(--bg-surface-800); }
.text-bg-sub-300 { color: var(--bg-sub-300); }
.text-bg-soft-200 { color: var(--bg-soft-200); }
.text-bg-weak-50 { color: var(--bg-weak-50); }
.text-bg-weak-25 { color: var(--bg-weak-25); }
.text-bg-white-0 { color: var(--bg-white-0); }
.text-text-strong-950 { color: var(--text-strong-950); }
.text-text-sub-600 { color: var(--text-sub-600); }
.text-text-soft-400 { color: var(--text-soft-400); }
.text-text-disabled-300 { color: var(--text-disabled-300); }
.text-text-white-0 { color: var(--text-white-0); }
.text-stroke-strong-950 { color: var(--stroke-strong-950); }
.text-stroke-sub-300 { color: var(--stroke-sub-300); }
.text-stroke-soft-200 { color: var(--stroke-soft-200); }
.text-stroke-white-0 { color: var(--stroke-white-0); }
.text-icon-strong-950 { color: var(--icon-strong-950); }
.text-icon-sub-600 { color: var(--icon-sub-600); }
.text-icon-soft-400 { color: var(--icon-soft-400); }
.text-icon-disabled-300 { color: var(--icon-disabled-300); }
.text-icon-white-0 { color: var(--icon-white-0); }
.text-state-faded-dark { color: var(--state-faded-dark); }
.text-state-faded-base { color: var(--state-faded-base); }
.text-state-faded-light { color: var(--state-faded-light); }
.text-state-faded-lighter { color: var(--state-faded-lighter); }
.text-state-information-dark { color: var(--state-information-dark); }
.text-state-information-base { color: var(--state-information-base); }
.text-state-information-light { color: var(--state-information-light); }
.text-state-information-lighter { color: var(--state-information-lighter); }
.text-state-warning-dark { color: var(--state-warning-dark); }
.text-state-warning-base { color: var(--state-warning-base); }
.text-state-warning-light { color: var(--state-warning-light); }
.text-state-warning-lighter { color: var(--state-warning-lighter); }
.text-state-error-dark { color: var(--state-error-dark); }
.text-state-error-base { color: var(--state-error-base); }
.text-state-error-light { color: var(--state-error-light); }
.text-state-error-lighter { color: var(--state-error-lighter); }
.text-state-success-dark { color: var(--state-success-dark); }
.text-state-success-base { color: var(--state-success-base); }
.text-state-success-light { color: var(--state-success-light); }
.text-state-success-lighter { color: var(--state-success-lighter); }
.text-state-away-dark { color: var(--state-away-dark); }
.text-state-away-base { color: var(--state-away-base); }
.text-state-away-light { color: var(--state-away-light); }
.text-state-away-lighter { color: var(--state-away-lighter); }
.text-state-feature-dark { color: var(--state-feature-dark); }
.text-state-feature-base { color: var(--state-feature-base); }
.text-state-feature-light { color: var(--state-feature-light); }
.text-state-feature-lighter { color: var(--state-feature-lighter); }
.text-state-verified-dark { color: var(--state-verified-dark); }
.text-state-verified-base { color: var(--state-verified-base); }
.text-state-verified-light { color: var(--state-verified-light); }
.text-state-verified-lighter { color: var(--state-verified-lighter); }
.text-state-highlighted-dark { color: var(--state-highlighted-dark); }
.text-state-highlighted-base { color: var(--state-highlighted-base); }
.text-state-highlighted-light { color: var(--state-highlighted-light); }
.text-state-highlighted-lighter { color: var(--state-highlighted-lighter); }
.text-state-stable-dark { color: var(--state-stable-dark); }
.text-state-stable-base { color: var(--state-stable-base); }
.text-state-stable-light { color: var(--state-stable-light); }
.text-state-stable-lighter { color: var(--state-stable-lighter); }
.text-static-black { color: var(--static-black); }
.text-static-white { color: var(--static-white); }
.text-overlay { color: var(--overlay); }
.text-overlay-white { color: var(--overlay-white); }
.text-overlay-white-0 { color: var(--overlay-white-0); }
.text-illustration-strong-400 { color: var(--illustration-strong-400); }
.text-illustration-sub-300 { color: var(--illustration-sub-300); }
.text-illustration-soft-200 { color: var(--illustration-soft-200); }
.text-illustration-weak-100 { color: var(--illustration-weak-100); }
.text-illustration-white-0 { color: var(--illustration-white-0); }
.text-social-apple { color: var(--social-apple); }
.text-social-twitter { color: var(--social-twitter); }
.text-social-github { color: var(--social-github); }
.text-social-notion { color: var(--social-notion); }
.text-social-tidal { color: var(--social-tidal); }
.text-social-amazon { color: var(--social-amazon); }
.text-social-zendesk { color: var(--social-zendesk); }
.text-primary-darkest { color: var(--primary-darkest); }
.text-primary-dark { color: var(--primary-dark); }
.text-primary-base { color: var(--primary-base); }
.text-primary-light { color: var(--primary-light); }
.text-primary-lighter { color: var(--primary-lighter); }
.text-primary-alpha-24 { color: var(--primary-alpha-24); }
.text-primary-alpha-16 { color: var(--primary-alpha-16); }
.text-primary-alpha-10 { color: var(--primary-alpha-10); }

/* ---- border-color ---- */
.border-bg-strong-950 { border-color: var(--bg-strong-950); }
.border-bg-surface-800 { border-color: var(--bg-surface-800); }
.border-bg-sub-300 { border-color: var(--bg-sub-300); }
.border-bg-soft-200 { border-color: var(--bg-soft-200); }
.border-bg-weak-50 { border-color: var(--bg-weak-50); }
.border-bg-weak-25 { border-color: var(--bg-weak-25); }
.border-bg-white-0 { border-color: var(--bg-white-0); }
.border-text-strong-950 { border-color: var(--text-strong-950); }
.border-text-sub-600 { border-color: var(--text-sub-600); }
.border-text-soft-400 { border-color: var(--text-soft-400); }
.border-text-disabled-300 { border-color: var(--text-disabled-300); }
.border-text-white-0 { border-color: var(--text-white-0); }
.border-stroke-strong-950 { border-color: var(--stroke-strong-950); }
.border-stroke-sub-300 { border-color: var(--stroke-sub-300); }
.border-stroke-soft-200 { border-color: var(--stroke-soft-200); }
.border-stroke-white-0 { border-color: var(--stroke-white-0); }
.border-icon-strong-950 { border-color: var(--icon-strong-950); }
.border-icon-sub-600 { border-color: var(--icon-sub-600); }
.border-icon-soft-400 { border-color: var(--icon-soft-400); }
.border-icon-disabled-300 { border-color: var(--icon-disabled-300); }
.border-icon-white-0 { border-color: var(--icon-white-0); }
.border-state-faded-dark { border-color: var(--state-faded-dark); }
.border-state-faded-base { border-color: var(--state-faded-base); }
.border-state-faded-light { border-color: var(--state-faded-light); }
.border-state-faded-lighter { border-color: var(--state-faded-lighter); }
.border-state-information-dark { border-color: var(--state-information-dark); }
.border-state-information-base { border-color: var(--state-information-base); }
.border-state-information-light { border-color: var(--state-information-light); }
.border-state-information-lighter { border-color: var(--state-information-lighter); }
.border-state-warning-dark { border-color: var(--state-warning-dark); }
.border-state-warning-base { border-color: var(--state-warning-base); }
.border-state-warning-light { border-color: var(--state-warning-light); }
.border-state-warning-lighter { border-color: var(--state-warning-lighter); }
.border-state-error-dark { border-color: var(--state-error-dark); }
.border-state-error-base { border-color: var(--state-error-base); }
.border-state-error-light { border-color: var(--state-error-light); }
.border-state-error-lighter { border-color: var(--state-error-lighter); }
.border-state-success-dark { border-color: var(--state-success-dark); }
.border-state-success-base { border-color: var(--state-success-base); }
.border-state-success-light { border-color: var(--state-success-light); }
.border-state-success-lighter { border-color: var(--state-success-lighter); }
.border-state-away-dark { border-color: var(--state-away-dark); }
.border-state-away-base { border-color: var(--state-away-base); }
.border-state-away-light { border-color: var(--state-away-light); }
.border-state-away-lighter { border-color: var(--state-away-lighter); }
.border-state-feature-dark { border-color: var(--state-feature-dark); }
.border-state-feature-base { border-color: var(--state-feature-base); }
.border-state-feature-light { border-color: var(--state-feature-light); }
.border-state-feature-lighter { border-color: var(--state-feature-lighter); }
.border-state-verified-dark { border-color: var(--state-verified-dark); }
.border-state-verified-base { border-color: var(--state-verified-base); }
.border-state-verified-light { border-color: var(--state-verified-light); }
.border-state-verified-lighter { border-color: var(--state-verified-lighter); }
.border-state-highlighted-dark { border-color: var(--state-highlighted-dark); }
.border-state-highlighted-base { border-color: var(--state-highlighted-base); }
.border-state-highlighted-light { border-color: var(--state-highlighted-light); }
.border-state-highlighted-lighter { border-color: var(--state-highlighted-lighter); }
.border-state-stable-dark { border-color: var(--state-stable-dark); }
.border-state-stable-base { border-color: var(--state-stable-base); }
.border-state-stable-light { border-color: var(--state-stable-light); }
.border-state-stable-lighter { border-color: var(--state-stable-lighter); }
.border-static-black { border-color: var(--static-black); }
.border-static-white { border-color: var(--static-white); }
.border-overlay { border-color: var(--overlay); }
.border-overlay-white { border-color: var(--overlay-white); }
.border-overlay-white-0 { border-color: var(--overlay-white-0); }
.border-illustration-strong-400 { border-color: var(--illustration-strong-400); }
.border-illustration-sub-300 { border-color: var(--illustration-sub-300); }
.border-illustration-soft-200 { border-color: var(--illustration-soft-200); }
.border-illustration-weak-100 { border-color: var(--illustration-weak-100); }
.border-illustration-white-0 { border-color: var(--illustration-white-0); }
.border-social-apple { border-color: var(--social-apple); }
.border-social-twitter { border-color: var(--social-twitter); }
.border-social-github { border-color: var(--social-github); }
.border-social-notion { border-color: var(--social-notion); }
.border-social-tidal { border-color: var(--social-tidal); }
.border-social-amazon { border-color: var(--social-amazon); }
.border-social-zendesk { border-color: var(--social-zendesk); }
.border-primary-darkest { border-color: var(--primary-darkest); }
.border-primary-dark { border-color: var(--primary-dark); }
.border-primary-base { border-color: var(--primary-base); }
.border-primary-light { border-color: var(--primary-light); }
.border-primary-lighter { border-color: var(--primary-lighter); }
.border-primary-alpha-24 { border-color: var(--primary-alpha-24); }
.border-primary-alpha-16 { border-color: var(--primary-alpha-16); }
.border-primary-alpha-10 { border-color: var(--primary-alpha-10); }

/* ---- fill ---- */
.fill-bg-strong-950 { fill: var(--bg-strong-950); }
.fill-bg-surface-800 { fill: var(--bg-surface-800); }
.fill-bg-sub-300 { fill: var(--bg-sub-300); }
.fill-bg-soft-200 { fill: var(--bg-soft-200); }
.fill-bg-weak-50 { fill: var(--bg-weak-50); }
.fill-bg-weak-25 { fill: var(--bg-weak-25); }
.fill-bg-white-0 { fill: var(--bg-white-0); }
.fill-text-strong-950 { fill: var(--text-strong-950); }
.fill-text-sub-600 { fill: var(--text-sub-600); }
.fill-text-soft-400 { fill: var(--text-soft-400); }
.fill-text-disabled-300 { fill: var(--text-disabled-300); }
.fill-text-white-0 { fill: var(--text-white-0); }
.fill-stroke-strong-950 { fill: var(--stroke-strong-950); }
.fill-stroke-sub-300 { fill: var(--stroke-sub-300); }
.fill-stroke-soft-200 { fill: var(--stroke-soft-200); }
.fill-stroke-white-0 { fill: var(--stroke-white-0); }
.fill-icon-strong-950 { fill: var(--icon-strong-950); }
.fill-icon-sub-600 { fill: var(--icon-sub-600); }
.fill-icon-soft-400 { fill: var(--icon-soft-400); }
.fill-icon-disabled-300 { fill: var(--icon-disabled-300); }
.fill-icon-white-0 { fill: var(--icon-white-0); }
.fill-state-faded-dark { fill: var(--state-faded-dark); }
.fill-state-faded-base { fill: var(--state-faded-base); }
.fill-state-faded-light { fill: var(--state-faded-light); }
.fill-state-faded-lighter { fill: var(--state-faded-lighter); }
.fill-state-information-dark { fill: var(--state-information-dark); }
.fill-state-information-base { fill: var(--state-information-base); }
.fill-state-information-light { fill: var(--state-information-light); }
.fill-state-information-lighter { fill: var(--state-information-lighter); }
.fill-state-warning-dark { fill: var(--state-warning-dark); }
.fill-state-warning-base { fill: var(--state-warning-base); }
.fill-state-warning-light { fill: var(--state-warning-light); }
.fill-state-warning-lighter { fill: var(--state-warning-lighter); }
.fill-state-error-dark { fill: var(--state-error-dark); }
.fill-state-error-base { fill: var(--state-error-base); }
.fill-state-error-light { fill: var(--state-error-light); }
.fill-state-error-lighter { fill: var(--state-error-lighter); }
.fill-state-success-dark { fill: var(--state-success-dark); }
.fill-state-success-base { fill: var(--state-success-base); }
.fill-state-success-light { fill: var(--state-success-light); }
.fill-state-success-lighter { fill: var(--state-success-lighter); }
.fill-state-away-dark { fill: var(--state-away-dark); }
.fill-state-away-base { fill: var(--state-away-base); }
.fill-state-away-light { fill: var(--state-away-light); }
.fill-state-away-lighter { fill: var(--state-away-lighter); }
.fill-state-feature-dark { fill: var(--state-feature-dark); }
.fill-state-feature-base { fill: var(--state-feature-base); }
.fill-state-feature-light { fill: var(--state-feature-light); }
.fill-state-feature-lighter { fill: var(--state-feature-lighter); }
.fill-state-verified-dark { fill: var(--state-verified-dark); }
.fill-state-verified-base { fill: var(--state-verified-base); }
.fill-state-verified-light { fill: var(--state-verified-light); }
.fill-state-verified-lighter { fill: var(--state-verified-lighter); }
.fill-state-highlighted-dark { fill: var(--state-highlighted-dark); }
.fill-state-highlighted-base { fill: var(--state-highlighted-base); }
.fill-state-highlighted-light { fill: var(--state-highlighted-light); }
.fill-state-highlighted-lighter { fill: var(--state-highlighted-lighter); }
.fill-state-stable-dark { fill: var(--state-stable-dark); }
.fill-state-stable-base { fill: var(--state-stable-base); }
.fill-state-stable-light { fill: var(--state-stable-light); }
.fill-state-stable-lighter { fill: var(--state-stable-lighter); }
.fill-static-black { fill: var(--static-black); }
.fill-static-white { fill: var(--static-white); }
.fill-overlay { fill: var(--overlay); }
.fill-overlay-white { fill: var(--overlay-white); }
.fill-overlay-white-0 { fill: var(--overlay-white-0); }
.fill-illustration-strong-400 { fill: var(--illustration-strong-400); }
.fill-illustration-sub-300 { fill: var(--illustration-sub-300); }
.fill-illustration-soft-200 { fill: var(--illustration-soft-200); }
.fill-illustration-weak-100 { fill: var(--illustration-weak-100); }
.fill-illustration-white-0 { fill: var(--illustration-white-0); }
.fill-social-apple { fill: var(--social-apple); }
.fill-social-twitter { fill: var(--social-twitter); }
.fill-social-github { fill: var(--social-github); }
.fill-social-notion { fill: var(--social-notion); }
.fill-social-tidal { fill: var(--social-tidal); }
.fill-social-amazon { fill: var(--social-amazon); }
.fill-social-zendesk { fill: var(--social-zendesk); }
.fill-primary-darkest { fill: var(--primary-darkest); }
.fill-primary-dark { fill: var(--primary-dark); }
.fill-primary-base { fill: var(--primary-base); }
.fill-primary-light { fill: var(--primary-light); }
.fill-primary-lighter { fill: var(--primary-lighter); }
.fill-primary-alpha-24 { fill: var(--primary-alpha-24); }
.fill-primary-alpha-16 { fill: var(--primary-alpha-16); }
.fill-primary-alpha-10 { fill: var(--primary-alpha-10); }