/* Gerado por _scripts/export.mjs a partir de DESIGN.md (schema v2) */
/* Não editar manualmente; rodar export.mjs novamente após alterar DESIGN.md */

:root {
  color-scheme: light dark;

  /* ============ COLORS (canonical slots) ============ */
  --color-primary: #14D3BF;
  --color-on-primary: #06413B;
  --color-secondary: #147C71;  /* claro: branco em cima 5.06 | escuro: canvas em cima 11.12 */
  --color-on-secondary: #FFFFFF;
  --color-tertiary: #8A3FFC;
  --color-on-tertiary: #FFFFFF;
  --color-neutral: #4A5958;
  --color-surface: #F9FBFB;
  --color-on-surface: #2E3B3A;
  --color-surface-variant: #FFFFFF;
  --color-on-surface-variant: #2E3B3A;
  --color-outline: #6F8B88;
  --color-error: #B02145;  /* claro: 6.42 / 6.67 sobre gelo e cartão; branco em cima 6.67 | escuro: 8.41 / 7.58 sobre canvas e cartão (inferido, não veio da página de teste) */
  --color-on-error: #FFFFFF;
  --color-success: #1C7853;
  --color-warning: #BE3927;  /* claro: 5.32 / 5.52 sobre gelo e cartão | escuro: 8.74 / 7.87 sobre canvas e cartão (inferido, não veio da página de teste) */
  --color-info: #147C71;

  /* ============ NAMED COLORS (do manual) ============ */
  --color-canvas: #F9FBFB;
  --color-cartao: #FFFFFF;
  --color-elevado: #F9FBFB;
  --color-polegar: #FFFFFF;
  --color-papel: #FCFDFD;
  --color-tinta: #1B2826;  /* claro: 14.67 / 15.24 / 13.40 sobre gelo, cartão e tingido | escuro: 16.85 / 15.18 / 12.43 / 12.53 sobre canvas, cartão, elevado e tingido */
  --color-corpo: #2E3B3A;  /* claro: 11.22 / 11.65 / 10.24 sobre gelo, cartão e tingido; 10.39 sobre o preenchimento de controle no cartão | escuro: 12.46 / 11.23 / 9.20 / 9.27 sobre canvas, cartão, elevado e tingido */
  --color-meta: #4A5958;  /* claro: 7.07 / 7.34 / 6.45 sobre gelo, cartão e tingido; 6.41 sobre o tile | escuro: 7.96 / 7.17 / 5.88 / 5.92 sobre canvas, cartão, elevado e tingido */
  --color-tingido: #E7F3EF;
  --color-contorno: #6F8B88;  /* claro: 3.53 / 3.67 sobre gelo e cartão (borda de controle, piso 3:1) | escuro: 3.93 / 3.54 sobre canvas e cartão */
  --color-cta: #14D3BF;
  --color-cta-hover: #10C2AF;
  --color-cta-ativo: #0EB09F;
  --color-cta-tinta: #06413B;  /* 6.08 / 5.12 / 4.23 sobre CTA, hover e pressionado (o pressionado dura 100ms) */
  --color-sec-fundo: #FFFFFF;
  --color-sec-hover: #F3F6F6;
  --color-sec-tinta: #1B2826;  /* claro: 15.24 / 14.02 sobre o secundário em repouso e no hover | escuro: 12.43 / 10.12 sobre o secundário em repouso e no hover */
  --color-teal-texto: #147C71;  /* claro: 4.87 / 5.06 sobre gelo e cartão; 4.45 sobre tingido, por isso nunca no tingido | escuro: 11.12 / 10.02 / 8.21 / 8.28 sobre canvas, cartão, elevado e tingido */
  --color-teal-titulo: #199083;  /* claro: 3.77 / 3.92 sobre gelo e cartão: só texto grande, a partir de 24px | escuro: 11.12 / 10.02 sobre canvas e cartão */
  --color-teal-slide: #16867A;
  --color-on-teal-slide: #FFFFFF;  /* 4.44 sobre teal-slide: gancho de 20px 700 é texto grande; nome e @ são peça ilustrada */
  --color-teal-area: #4FC7BB;  /* 1.98 sobre gelo: só área, o estado vem da forma (polegar, visto) */
  --color-teal-fio: #3A8C85;  /* 3.84 / 3.98 sobre gelo e cartão */
  --color-on-teal: #0E1A16;  /* 8.68 sobre teal-area; 5.71 sobre graf-s1 */
  --color-tile: #E3F3F0;
  --color-tile-tinta: #19706A;  /* claro: 5.18 / 5.14 sobre tingido e tile; 5.67 sobre gelo | escuro: 7.11 sobre tile */
  --color-violeta: #AF65FF;  /* 3.30 sobre gelo (área, nunca texto) */
  --color-violeta-solido: #8A3FFC;  /* texto branco em cima 5.00 */
  --color-violeta-texto: #7A2FE0;  /* claro: 6.11 / 6.34 sobre gelo e cartão | escuro: 7.69 / 6.93 / 5.68 sobre canvas, cartão e elevado */
  --color-sucesso: #1C7853;  /* claro: 5.24 / 5.44 sobre gelo e cartão | escuro: 9.13 / 8.22 sobre canvas e cartão */
  --color-dica: #FFFFFF;
  --color-chave-polegar: #FFFFFF;
  --color-graf-destaque: #4FC7BB;  /* 1.98 sobre gelo; o valor vem escrito em cima e a tabela gêmea repete */
  --color-graf-apagado: #C5D3D1;  /* claro: 1.49 sobre gelo (de propósito: o resto recua) | escuro: 1.88 sobre canvas */
  --color-graf-s1: #1FA394;
  --color-graf-s2: #3D6FD9;
  --color-graf-s3: #E2667A;
  --color-graf-s4: #9B5BB5;
  --color-graf-o1: #4FC7BB;
  --color-graf-o2: #2FA699;
  --color-graf-o3: #20857B;
  --color-graf-o4: #17655E;
  --color-graf-comparacao: #879593;  /* claro: 3.00 sobre gelo | escuro: 3.56 sobre canvas */
  --color-graf-grade: #E9EFEE;
  --color-graf-eixo: #C5D3D1;

  /* ============ TYPOGRAPHY (roles) ============ */
  --font-display-hero: "Hanken Grotesk", system-ui, sans-serif;
  --text-display-hero: 3.25rem;
  --font-weight-display-hero: 700;
  --leading-display-hero: 1.06;
  --tracking-display-hero: -0.03em;
  --font-display-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-display-large: 2.6rem;
  --font-weight-display-large: 700;
  --leading-display-large: 1.1;
  --tracking-display-large: -0.026em;
  --font-section-heading: "Hanken Grotesk", system-ui, sans-serif;
  --text-section-heading: 2.375rem;
  --font-weight-section-heading: 700;
  --leading-section-heading: 1.1;
  --tracking-section-heading: -0.025em;
  --font-subheading-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-subheading-large: 1.25rem;
  --font-weight-subheading-large: 600;
  --leading-subheading-large: 1.3;
  --tracking-subheading-large: -0.015em;
  --font-subheading: "Hanken Grotesk", system-ui, sans-serif;
  --text-subheading: 1.0625rem;
  --font-weight-subheading: 650;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.01em;
  --font-body-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-body-large: 1.1875rem;
  --font-weight-body-large: 400;
  --leading-body-large: 1.55;
  --tracking-body-large: 0em;
  --font-body-intro: "Hanken Grotesk", system-ui, sans-serif;
  --text-body-intro: 1.125rem;
  --font-weight-body-intro: 400;
  --leading-body-intro: 1.6;
  --tracking-body-intro: 0em;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --text-body: 1.0625rem;
  --font-weight-body: 400;
  --leading-body: 1.6;
  --tracking-body: 0em;
  --font-body-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-body-small: 0.9375rem;
  --font-weight-body-small: 400;
  --leading-body-small: 1.5;
  --tracking-body-small: 0em;
  --font-button: "Hanken Grotesk", system-ui, sans-serif;
  --text-button: 0.9375rem;
  --font-weight-button: 600;
  --leading-button: 1.2;
  --tracking-button: -0.005em;
  --font-button-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-button-small: 0.875rem;
  --font-weight-button-small: 600;
  --leading-button-small: 1.2;
  --tracking-button-small: 0em;
  --font-link: "Hanken Grotesk", system-ui, sans-serif;
  --text-link: 0.9375rem;
  --font-weight-link: 500;
  --leading-link: 1.5;
  --tracking-link: 0em;
  --font-caption: "Hanken Grotesk", system-ui, sans-serif;
  --text-caption: 0.9375rem;
  --font-weight-caption: 400;
  --leading-caption: 1.45;
  --tracking-caption: 0em;
  --font-caption-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-caption-small: 0.875rem;
  --font-weight-caption-small: 400;
  --leading-caption-small: 1.4;
  --tracking-caption-small: 0.008em;
  --font-micro: "Hanken Grotesk", system-ui, sans-serif;
  --text-micro: 0.875rem;
  --font-weight-micro: 700;
  --leading-micro: 1.4;
  --tracking-micro: 0.005em;
  --font-number-hero: "Hanken Grotesk", system-ui, sans-serif;
  --text-number-hero: 3.25rem;
  --font-weight-number-hero: 700;
  --leading-number-hero: 1;
  --tracking-number-hero: -0.035em;
  --font-number-kpi: "Hanken Grotesk", system-ui, sans-serif;
  --text-number-kpi: 1.85rem;
  --font-weight-number-kpi: 700;
  --leading-number-kpi: 1.1;
  --tracking-number-kpi: -0.028em;
  --font-number-preco: "Hanken Grotesk", system-ui, sans-serif;
  --text-number-preco: 2.6rem;
  --font-weight-number-preco: 700;
  --leading-number-preco: 1;
  --tracking-number-preco: -0.03em;
  --font-chart-value: "Hanken Grotesk", system-ui, sans-serif;
  --text-chart-value: 1rem;
  --font-weight-chart-value: 700;
  --leading-chart-value: 1.2;
  --tracking-chart-value: 0em;
  --font-code-bold: "JetBrains Mono", ui-monospace, monospace;
  --text-code-bold: 1.125rem;
  --font-weight-code-bold: 500;
  --leading-code-bold: 1.45;
  --tracking-code-bold: -0.01em;
  --font-code-body: "JetBrains Mono", ui-monospace, monospace;
  --text-code-body: 1.0625rem;
  --font-weight-code-body: 500;
  --leading-code-body: 1.45;
  --tracking-code-body: -0.01em;
  --font-code-label: "JetBrains Mono", ui-monospace, monospace;
  --text-code-label: 0.875rem;
  --font-weight-code-label: 500;
  --leading-code-label: 1.4;
  --tracking-code-label: 0.06em;
  --font-code-micro: "JetBrains Mono", ui-monospace, monospace;
  --text-code-micro: 0.875rem;
  --font-weight-code-micro: 400;
  --leading-code-micro: 1.4;
  --tracking-code-micro: -0.01em;

  /* ============ SPACING ============ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;
  --space-gutter: 16px;
  --space-container-padding: 24px;

  /* ============ ROUNDED ============ */
  --radius-none: 0px;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* ============ BREAKPOINTS ============ */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 600px;
  --breakpoint-desktop: 900px;
  --breakpoint-wide: 1120px;

  /* ============ SHADOWS ============ */
  --shadow-flat: none;
  --shadow-cartao: 0 0 0 .5px rgba(27,40,38,.07), 0 1px 3px rgba(27,40,38,.05);
  --shadow-polegar: 0 0 0 .5px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.10), 0 2px 1px rgba(0,0,0,.03);
  --shadow-dica: 0 0 0 .5px rgba(0,0,0,.08), 0 8px 24px -8px rgba(0,0,0,.28);
  --shadow-topo-rolou: 0 1px 0 #E3EAE9, 0 8px 16px -12px rgba(0,0,0,.18);
  --shadow-cta-borda: inset 0 .5px 0 rgba(255,255,255,.25);

  /* ============ MOTION ============ */
  --duration-aperto: 100ms;
  --duration-dica: 120ms;
  --duration-rapida: 150ms;
  --duration-troca: 200ms;
  --duration-tema: 250ms;
  --duration-mola: 280ms;
  --duration-lenta: 400ms;
  --duration-revela: 500ms;
  --duration-conta: 700ms;
  --duration-cursor: 1100ms;
  --ease-mola: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-revela: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-saida: ease-out;
  --ease-padrao: ease;

  /* ============ CUSTOM (medida de layout e camada de fundo) ============ */
  --coluna: 1120px;
  --medida: 66ch;
  --alvo: 44px;
  --calha: 16px;
  --raio-card: 14px;
  --raio-campo: 12px;
  --fator-squircle: 1.6;
  --escala-aperto: 0.97;
  --revela-distancia: 12px;
  --topo-altura: 64px;
  --topo-opacidade: 72%;
  --topo-desfoque: blur(20px) saturate(180%);
  --chave-largura: 51px;
  --chave-altura: 31px;
  --coluna-grafico-max: 80px;
  --cor-preenchimento: rgba(27,40,38,.06);
  --cor-separador: #E3EAE9;
  --cor-sec-anel: #D5DEDD;
  --cor-chave-off: rgba(27,40,38,.14);
  --cor-marca-texto: rgba(175,101,255,.30);
  --cor-slide-apagado: rgba(255,255,255,.78);
  --cor-slide-avatar: rgba(255,255,255,.16);
  --cor-dither-0: var(--color-canvas);
  --cor-dither-1: var(--color-teal-area);
  --cor-dither-2: var(--color-cartao);
  --dither-celula: 4px;
  --dither-dissolve-celula: 8px;
  --dither-banda-altura: 64px;
  --dither-sombra-deslocamento: 6px;
  --dither-rampa-deslocamento: 14px;
  --fx-campo-opacidade: 0.3;
  --fx-holofote-raio: 280px;
  --fx-feixe-duracao: 6s;

  /* ============ Z-INDEX ============ */
  --z-base: 0;
  --z-raised: 6;
  --z-sticky: 10;
  --z-aviso: 20;

  /* ============ OPACITY ============ */
  --opacity-invisible: 0;
  --opacity-esmaecido: 0.35;
  --opacity-desativado: 0.45;
  --opacity-full: 1;
}

/* ============ TEMA ESCURO ============ */
/* Ligado por data-theme="dark" no <html>. O claro é o default e não
   precisa de atributo. O bloco de media query cobre o modo Sistema:
   ele só vale quando NÃO há data-theme, senão a escolha da aluna
   perderia pro sistema operacional. */

:root[data-theme="dark"], [data-theme="dark"] {
  /* ---- cores, papéis canônicos ---- */
  --color-primary: #14D3BF;
  --color-on-primary: #06413B;
  --color-secondary: #6FD8CC;  /* escuro: canvas em cima 11.12 */
  --color-on-secondary: #111111;
  --color-tertiary: #8A3FFC;
  --color-on-tertiary: #FFFFFF;
  --color-neutral: #A8A8AB;
  --color-surface: #111111;
  --color-on-surface: #D2D2CF;
  --color-surface-variant: #1C1C1E;
  --color-on-surface-variant: #D2D2CF;
  --color-outline: #727274;
  --color-error: #FF8A9A;  /* escuro: 8.41 / 7.58 sobre canvas e cartão (inferido, não veio da página de teste) */
  --color-on-error: #111111;
  --color-success: #5FC890;
  --color-warning: #F59A6B;  /* escuro: 8.74 / 7.87 sobre canvas e cartão (inferido, não veio da página de teste) */
  --color-info: #6FD8CC;

  /* ---- cores nomeadas ---- */
  --color-canvas: #111111;
  --color-cartao: #1C1C1E;
  --color-elevado: #2C2C2E;
  --color-polegar: #3A3A3C;
  --color-papel: #2C2C2E;
  --color-tinta: #F2F2F0;  /* escuro: 16.85 / 15.18 / 12.43 / 12.53 sobre canvas, cartão, elevado e tingido */
  --color-corpo: #D2D2CF;  /* escuro: 12.46 / 11.23 / 9.20 / 9.27 sobre canvas, cartão, elevado e tingido */
  --color-meta: #A8A8AB;  /* escuro: 7.96 / 7.17 / 5.88 / 5.92 sobre canvas, cartão, elevado e tingido */
  --color-tingido: #16302D;
  --color-contorno: #727274;  /* escuro: 3.93 / 3.54 sobre canvas e cartão */
  --color-sec-fundo: #2C2C2E;
  --color-sec-hover: #3A3A3C;
  --color-sec-tinta: #F2F2F0;  /* escuro: 12.43 / 10.12 sobre o secundário em repouso e no hover */
  --color-teal-texto: #6FD8CC;  /* escuro: 11.12 / 10.02 / 8.21 / 8.28 sobre canvas, cartão, elevado e tingido */
  --color-teal-titulo: #6FD8CC;  /* escuro: 11.12 / 10.02 sobre canvas e cartão */
  --color-tile: #1F3B38;
  --color-tile-tinta: #6FD8CC;  /* escuro: 7.11 sobre tile */
  --color-violeta-texto: #C08EFF;  /* escuro: 7.69 / 6.93 / 5.68 sobre canvas, cartão e elevado */
  --color-sucesso: #5FC890;  /* escuro: 9.13 / 8.22 sobre canvas e cartão */
  --color-dica: #2C2C2E;
  --color-graf-apagado: #3A4443;  /* escuro: 1.88 sobre canvas */
  --color-graf-s1: #22A194;
  --color-graf-s2: #4F7FE0;
  --color-graf-s3: #DC5F74;
  --color-graf-s4: #9670D6;
  --color-graf-o1: #1F6F68;
  --color-graf-o2: #2A9D92;
  --color-graf-o3: #4FC7BB;
  --color-graf-o4: #8FE0D6;
  --color-graf-comparacao: #6B6B70;  /* escuro: 3.56 sobre canvas */
  --color-graf-grade: #2A2A2D;
  --color-graf-eixo: #3A3A3C;

  /* ---- sombra: mais escura e menos tingida que no claro ---- */
  --shadow-cartao: 0 0 0 .5px rgba(255,255,255,.07), inset 0 .5px 0 rgba(255,255,255,.05);
  --shadow-polegar: 0 2px 6px rgba(0,0,0,.45), inset 0 .5px 0 rgba(255,255,255,.08);
  --shadow-topo-rolou: 0 1px 0 rgba(255,255,255,.08), 0 8px 16px -12px rgba(0,0,0,.18);

  /* ---- camada de acabamento ---- */
  --cor-preenchimento: rgba(255,255,255,.08);
  --cor-separador: rgba(255,255,255,.08);
  --cor-sec-anel: rgba(255,255,255,.10);
  --cor-chave-off: #39393D;
  --cor-marca-texto: rgba(175,101,255,.42);
  --cor-dither-0: var(--color-canvas);
  --cor-dither-1: var(--color-teal-area);
  --cor-dither-2: var(--color-cartao);
  --fx-campo-opacidade: 0.22;
}


[data-theme="light"] {
  --color-primary: #14D3BF;
  --color-on-primary: #06413B;
  --color-secondary: #147C71;  /* claro: branco em cima 5.06 */
  --color-on-secondary: #FFFFFF;
  --color-tertiary: #8A3FFC;
  --color-on-tertiary: #FFFFFF;
  --color-neutral: #4A5958;
  --color-surface: #F9FBFB;
  --color-on-surface: #2E3B3A;
  --color-surface-variant: #FFFFFF;
  --color-on-surface-variant: #2E3B3A;
  --color-outline: #6F8B88;
  --color-error: #B02145;  /* claro: 6.42 / 6.67 sobre gelo e cartão; branco em cima 6.67 */
  --color-on-error: #FFFFFF;
  --color-success: #1C7853;
  --color-warning: #BE3927;  /* claro: 5.32 / 5.52 sobre gelo e cartão */
  --color-info: #147C71;
  --color-canvas: #F9FBFB;
  --color-cartao: #FFFFFF;
  --color-elevado: #F9FBFB;
  --color-polegar: #FFFFFF;
  --color-papel: #FCFDFD;
  --color-tinta: #1B2826;  /* claro: 14.67 / 15.24 / 13.40 sobre gelo, cartão e tingido */
  --color-corpo: #2E3B3A;  /* claro: 11.22 / 11.65 / 10.24 sobre gelo, cartão e tingido; 10.39 sobre o preenchimento de controle no cartão */
  --color-meta: #4A5958;  /* claro: 7.07 / 7.34 / 6.45 sobre gelo, cartão e tingido; 6.41 sobre o tile */
  --color-tingido: #E7F3EF;
  --color-contorno: #6F8B88;  /* claro: 3.53 / 3.67 sobre gelo e cartão (borda de controle, piso 3:1) */
  --color-cta: #14D3BF;
  --color-cta-hover: #10C2AF;
  --color-cta-ativo: #0EB09F;
  --color-cta-tinta: #06413B;  /* claro: 6.08 / 5.12 / 4.23 sobre CTA, hover e pressionado (o pressionado dura 100ms) */
  --color-sec-fundo: #FFFFFF;
  --color-sec-hover: #F3F6F6;
  --color-sec-tinta: #1B2826;  /* claro: 15.24 / 14.02 sobre o secundário em repouso e no hover */
  --color-teal-texto: #147C71;  /* claro: 4.87 / 5.06 sobre gelo e cartão; 4.45 sobre tingido, por isso nunca no tingido */
  --color-teal-titulo: #199083;  /* claro: 3.77 / 3.92 sobre gelo e cartão: só texto grande, a partir de 24px */
  --color-teal-slide: #16867A;
  --color-on-teal-slide: #FFFFFF;  /* claro: 4.44 sobre teal-slide: gancho de 20px 700 é texto grande; nome e @ são peça ilustrada */
  --color-teal-area: #4FC7BB;  /* claro: 1.98 sobre gelo: só área, o estado vem da forma (polegar, visto) */
  --color-teal-fio: #3A8C85;  /* claro: 3.84 / 3.98 sobre gelo e cartão */
  --color-on-teal: #0E1A16;  /* claro: 8.68 sobre teal-area; 5.71 sobre graf-s1 */
  --color-tile: #E3F3F0;
  --color-tile-tinta: #19706A;  /* claro: 5.18 / 5.14 sobre tingido e tile; 5.67 sobre gelo */
  --color-violeta: #AF65FF;  /* claro: 3.30 sobre gelo (área, nunca texto) */
  --color-violeta-solido: #8A3FFC;  /* claro: texto branco em cima 5.00 */
  --color-violeta-texto: #7A2FE0;  /* claro: 6.11 / 6.34 sobre gelo e cartão */
  --color-sucesso: #1C7853;  /* claro: 5.24 / 5.44 sobre gelo e cartão */
  --color-dica: #FFFFFF;
  --color-chave-polegar: #FFFFFF;
  --color-graf-destaque: #4FC7BB;  /* claro: 1.98 sobre gelo; o valor vem escrito em cima e a tabela gêmea repete */
  --color-graf-apagado: #C5D3D1;  /* claro: 1.49 sobre gelo (de propósito: o resto recua) */
  --color-graf-s1: #1FA394;
  --color-graf-s2: #3D6FD9;
  --color-graf-s3: #E2667A;
  --color-graf-s4: #9B5BB5;
  --color-graf-o1: #4FC7BB;
  --color-graf-o2: #2FA699;
  --color-graf-o3: #20857B;
  --color-graf-o4: #17655E;
  --color-graf-comparacao: #879593;  /* claro: 3.00 sobre gelo */
  --color-graf-grade: #E9EFEE;
  --color-graf-eixo: #C5D3D1;
  --shadow-flat: none;
  --shadow-cartao: 0 0 0 .5px rgba(27,40,38,.07), 0 1px 3px rgba(27,40,38,.05);
  --shadow-polegar: 0 0 0 .5px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.10), 0 2px 1px rgba(0,0,0,.03);
  --shadow-dica: 0 0 0 .5px rgba(0,0,0,.08), 0 8px 24px -8px rgba(0,0,0,.28);
  --shadow-topo-rolou: 0 1px 0 #E3EAE9, 0 8px 16px -12px rgba(0,0,0,.18);
  --shadow-cta-borda: inset 0 .5px 0 rgba(255,255,255,.25);
  --coluna: 1120px;
  --medida: 66ch;
  --alvo: 44px;
  --calha: 16px;
  --raio-card: 14px;
  --raio-campo: 12px;
  --fator-squircle: 1.6;
  --escala-aperto: 0.97;
  --revela-distancia: 12px;
  --topo-altura: 64px;
  --topo-opacidade: 72%;
  --topo-desfoque: blur(20px) saturate(180%);
  --chave-largura: 51px;
  --chave-altura: 31px;
  --coluna-grafico-max: 80px;
  --cor-preenchimento: rgba(27,40,38,.06);
  --cor-separador: #E3EAE9;
  --cor-sec-anel: #D5DEDD;
  --cor-chave-off: rgba(27,40,38,.14);
  --cor-marca-texto: rgba(175,101,255,.30);
  --cor-slide-apagado: rgba(255,255,255,.78);
  --cor-slide-avatar: rgba(255,255,255,.16);
  --cor-dither-0: var(--color-canvas);
  --cor-dither-1: var(--color-teal-area);
  --cor-dither-2: var(--color-cartao);
  --dither-celula: 4px;
  --dither-dissolve-celula: 8px;
  --dither-banda-altura: 64px;
  --dither-sombra-deslocamento: 6px;
  --dither-rampa-deslocamento: 14px;
  --fx-campo-opacidade: 0.3;
  --fx-holofote-raio: 280px;
  --fx-feixe-duracao: 6s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* ---- cores, papéis canônicos ---- */
    --color-primary: #14D3BF;
    --color-on-primary: #06413B;
    --color-secondary: #6FD8CC;  /* escuro: canvas em cima 11.12 */
    --color-on-secondary: #111111;
    --color-tertiary: #8A3FFC;
    --color-on-tertiary: #FFFFFF;
    --color-neutral: #A8A8AB;
    --color-surface: #111111;
    --color-on-surface: #D2D2CF;
    --color-surface-variant: #1C1C1E;
    --color-on-surface-variant: #D2D2CF;
    --color-outline: #727274;
    --color-error: #FF8A9A;  /* escuro: 8.41 / 7.58 sobre canvas e cartão (inferido, não veio da página de teste) */
    --color-on-error: #111111;
    --color-success: #5FC890;
    --color-warning: #F59A6B;  /* escuro: 8.74 / 7.87 sobre canvas e cartão (inferido, não veio da página de teste) */
    --color-info: #6FD8CC;

    /* ---- cores nomeadas ---- */
    --color-canvas: #111111;
    --color-cartao: #1C1C1E;
    --color-elevado: #2C2C2E;
    --color-polegar: #3A3A3C;
    --color-papel: #2C2C2E;
    --color-tinta: #F2F2F0;  /* escuro: 16.85 / 15.18 / 12.43 / 12.53 sobre canvas, cartão, elevado e tingido */
    --color-corpo: #D2D2CF;  /* escuro: 12.46 / 11.23 / 9.20 / 9.27 sobre canvas, cartão, elevado e tingido */
    --color-meta: #A8A8AB;  /* escuro: 7.96 / 7.17 / 5.88 / 5.92 sobre canvas, cartão, elevado e tingido */
    --color-tingido: #16302D;
    --color-contorno: #727274;  /* escuro: 3.93 / 3.54 sobre canvas e cartão */
    --color-sec-fundo: #2C2C2E;
    --color-sec-hover: #3A3A3C;
    --color-sec-tinta: #F2F2F0;  /* escuro: 12.43 / 10.12 sobre o secundário em repouso e no hover */
    --color-teal-texto: #6FD8CC;  /* escuro: 11.12 / 10.02 / 8.21 / 8.28 sobre canvas, cartão, elevado e tingido */
    --color-teal-titulo: #6FD8CC;  /* escuro: 11.12 / 10.02 sobre canvas e cartão */
    --color-tile: #1F3B38;
    --color-tile-tinta: #6FD8CC;  /* escuro: 7.11 sobre tile */
    --color-violeta-texto: #C08EFF;  /* escuro: 7.69 / 6.93 / 5.68 sobre canvas, cartão e elevado */
    --color-sucesso: #5FC890;  /* escuro: 9.13 / 8.22 sobre canvas e cartão */
    --color-dica: #2C2C2E;
    --color-graf-apagado: #3A4443;  /* escuro: 1.88 sobre canvas */
    --color-graf-s1: #22A194;
    --color-graf-s2: #4F7FE0;
    --color-graf-s3: #DC5F74;
    --color-graf-s4: #9670D6;
    --color-graf-o1: #1F6F68;
    --color-graf-o2: #2A9D92;
    --color-graf-o3: #4FC7BB;
    --color-graf-o4: #8FE0D6;
    --color-graf-comparacao: #6B6B70;  /* escuro: 3.56 sobre canvas */
    --color-graf-grade: #2A2A2D;
    --color-graf-eixo: #3A3A3C;

    /* ---- sombra: mais escura e menos tingida que no claro ---- */
    --shadow-cartao: 0 0 0 .5px rgba(255,255,255,.07), inset 0 .5px 0 rgba(255,255,255,.05);
    --shadow-polegar: 0 2px 6px rgba(0,0,0,.45), inset 0 .5px 0 rgba(255,255,255,.08);
    --shadow-topo-rolou: 0 1px 0 rgba(255,255,255,.08), 0 8px 16px -12px rgba(0,0,0,.18);

    /* ---- camada de acabamento ---- */
    --cor-preenchimento: rgba(255,255,255,.08);
    --cor-separador: rgba(255,255,255,.08);
    --cor-sec-anel: rgba(255,255,255,.10);
    --cor-chave-off: #39393D;
    --cor-marca-texto: rgba(175,101,255,.42);
    --cor-dither-0: var(--color-canvas);
    --cor-dither-1: var(--color-teal-area);
    --cor-dither-2: var(--color-cartao);
    --fx-campo-opacidade: 0.22;
  }
}