/* ==========================================================================
   ConnectMalls — Design Tokens  v1.1
   Extraídos do briefing "SITE CONNECTMALLS" (4 pranchas desktop) + ajustes
   de acessibilidade e consistência. Fonte única de verdade para Figma e HTML.

   CONVENÇÃO DE NOME
   --cm-<família>-<degrau>            rampas de cor      --cm-teal-700
   --cm-<categoria>-<nome>            tudo o mais        --cm-space-6
   A categoria é implícita nas cores (não existe --cm-color-*).

   CONTRASTE
   Todos os tokens de TEXTO foram calibrados sobre o fundo mais escuro que o
   sistema usa (--cm-surface-sunken #EDF2F7), não sobre branco puro. Cada um
   traz os dois números: branco / sunken. Isso vale porque a página não é
   branca (--cm-canvas #F9FAFB) e as seções alternam para #F3F6FA.

   ORDEM DE CARREGAMENTO (obrigatória)
   tokens.css → base.css → components.css → sections.css
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. CORES — NEUTROS E SUPERFÍCIES
     ---------------------------------------------------------------------- */
  --cm-white:            #FFFFFF;
  --cm-canvas:           #F9FAFB;  /* fundo de página */
  --cm-surface:          #FFFFFF;  /* cards */
  --cm-surface-alt:      #F3F6FA;  /* seções alternadas */
  --cm-surface-sunken:   #EDF2F7;  /* piso de contraste do sistema */
  --cm-surface-dark:     #002463;  /* painéis institucionais */

  --cm-line:             #E3E9F0;  /* separa CONTEÚDO — nunca limita controle */
  --cm-line-strong:      #7B8BAE;  /* 3.42 / 3.03 — limite visual de controle (1.4.11) */
  --cm-line-on-dark:     #1B4183;

  /* Texto — contrastes: branco / sunken */
  --cm-text-primary:     #021A4A;  /* 16.81 / 14.95  AAA */
  --cm-text-secondary:   #4A5878;  /*  7.29 / 6.48   AAA */
  --cm-text-muted:       #646E87;  /*  5.09 / 4.52   AA  */
  --cm-text-on-dark:     #FFFFFF;
  --cm-text-on-dark-muted: #A9B6D1; /* 7.28 sobre surface-dark */
  --cm-text-disabled:    #9AA4B8;  /* isento de contraste (WCAG 1.4.3) */

  /* ----------------------------------------------------------------------
     2. CORES — MARCA
     ---------------------------------------------------------------------- */

  /* Navy institucional */
  --cm-navy-50:          #EEF2FA;
  --cm-navy-100:         #DCE4F2;
  --cm-navy-200:         #B7C4E0;
  --cm-navy-300:         #8B9CC4;
  --cm-navy-400:         #4E6494;
  --cm-navy-500:         #123A7C;
  --cm-navy-600:         #0A2E6E;
  --cm-navy-700:         #002463;  /* 14.66 — painel institucional */
  --cm-navy-800:         #021A4A;  /* 16.81 — título padrão */
  --cm-navy-900:         #010F33;
  --cm-navy-950:         #01081F;

  /* Teal — primária de ação */
  --cm-teal-50:          #E9F6F8;
  --cm-teal-100:         #CFEBEF;
  --cm-teal-200:         #9FD6DE;
  --cm-teal-300:         #62B8C5;  /* 6.41 sobre surface-dark */
  --cm-teal-400:         #199CAC;
  --cm-teal-500:         #077A86;  /*  5.08 / 4.51  AA */
  --cm-teal-600:         #01737D;  /*  5.60 / 4.97  AA — teal da marca */
  --cm-teal-700:         #016C79;  /*  6.14 / 5.45  AA — botão primário */
  --cm-teal-800:         #01515C;  /* hover / pressed */
  --cm-teal-900:         #003F49;
  --cm-teal-logo:        #007D89;  /* assinatura — proibido em UI */

  /* ----------------------------------------------------------------------
     3. CORES — ACENTOS POR VERTICAL
     Regra: o degrau -500 de cada rampa é DECORATIVO (fill, ícone, display).
     O degrau que recebe rótulo branco ou vira texto é sempre mais fechado.
     ---------------------------------------------------------------------- */

  /* 3.1 Inteligência Climática ....... aqua */
  --cm-clima-50:         #E7F4F9;
  --cm-clima-100:        #CDE9F2;
  --cm-clima-300:        #7CC3DA;  /* 7.45 sobre surface-dark */
  --cm-clima-500:        #0E8FA8;  /* 3.81 — só display ≥24px bold e ícone */
  --cm-clima-600:        #0B7285;  /*  5.59 / 4.96  AA — texto e fill com rótulo branco */
  --cm-clima-700:        #0A6B7D;  /*  5.48 sobre clima-50 — texto sobre fundo tingido */
  --cm-clima-800:        #0A5E70;
  --cm-clima-gradient:   linear-gradient(180deg, #C3E2EC 0%, #F6FBFD 62%);

  /* 3.2 Audiência Inteligente / RetailMetric Pulse ....... azul elétrico */
  --cm-pulse-50:         #EDEEFC;
  --cm-pulse-100:        #DADCF8;
  --cm-pulse-300:        #8C90E8;  /* 5.07 sobre surface-dark */
  --cm-pulse-500:        #1F1FC0;  /* 10.42 / 9.26 */
  --cm-pulse-700:        #0A0A78;  /* 15.82 / 14.06 */
  --cm-pulse-cyan:       #0A7591;  /*  5.29 / 4.70  AA — acento "METRIC" */
  --cm-pulse-gradient:   linear-gradient(180deg, #DCE3FB 0%, #F6F8FF 62%);

  /* 3.3 Fluxo de Pessoas / Flow Intelligence 360° ....... laranja */
  --cm-flow-50:          #FFF1E6;
  --cm-flow-100:         #FFDCC2;
  --cm-flow-300:         #FFA45C;  /* 7.48 sobre surface-dark */
  --cm-flow-500:         #F76B01;  /* 2.98 — NUNCA em texto. Fill, ícone, display ≥32px */
  --cm-flow-600:         #E05F00;
  --cm-flow-700:         #B54E01;  /*  5.18 / 4.60  AA — texto e fill com rótulo branco */
  --cm-flow-800:         #A84901;  /*  5.24 sobre flow-50 — texto sobre fundo tingido */
  --cm-flow-navy:        #001D76;  /* 14.61 — par tipográfico da vertical */
  --cm-flow-gradient:    linear-gradient(180deg, #FFE2CC 0%, #FFF7F1 62%);

  --cm-brand-gradient:   linear-gradient(180deg, #D9EFF2 0%, #F7FCFD 62%);

  /* Véus de hero — obrigatórios sobre foto, garantem o contraste do título */
  --cm-gradient-hero-veil:   linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,0) 62%);
  --cm-gradient-hero-veil-v: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 100%);

  /* ----------------------------------------------------------------------
     4. CORES — SEMÂNTICAS
     Cada par texto/fundo verificado ENTRE SI, não só contra branco.
     ---------------------------------------------------------------------- */
  --cm-success:          #0B6E3A;  /* 6.35 / branco · 5.69 sobre success-bg */
  --cm-success-bg:       #E7F6EE;
  --cm-warning:          #E8A317;  /* 2.17 — fill e ícone apenas */
  --cm-warning-text:     #8A6008;  /* 5.59 / branco · 5.06 sobre warning-bg */
  --cm-warning-bg:       #FDF3DC;
  --cm-danger:           #C32B21;  /* 5.69 / branco · 4.90 sobre danger-bg */
  --cm-danger-bg:        #FCEAE8;
  --cm-info:             #0B7285;  /* 5.59 / branco · 4.98 sobre info-bg */
  --cm-info-bg:          #E7F4F9;

  /* Foco — banda externa teal-600, ≥4.8:1 sobre TODOS os fundos do sistema */
  --cm-focus-ring:         0 0 0 3px #FFFFFF, 0 0 0 6px #01737D;
  --cm-focus-ring-on-dark: 0 0 0 3px #002463, 0 0 0 6px #62B8C5;

  /* Scrim / overlay — navy tingido, nunca preto puro */
  --cm-scrim:            rgba(2, 26, 74, 0.55);
  --cm-scrim-strong:     rgba(2, 26, 74, 0.72);
  --cm-scrim-header:     rgba(255, 255, 255, 0.88);
  --cm-backdrop-blur:    blur(12px);

  /* ----------------------------------------------------------------------
     5. CORES — DATA VIZ
     Aliases deliberados das rampas: garante coerência com a marca.
     Não "limpar" achando que é duplicação.
     ---------------------------------------------------------------------- */
  --cm-viz-1:            #016C79;  /* = teal-700  */
  --cm-viz-2:            #F76B01;  /* = flow-500  */
  --cm-viz-3:            #1F1FC0;  /* = pulse-500 */
  --cm-viz-4:            #0E8FA8;  /* = clima-500 */
  --cm-viz-5:            #0B6E3A;  /* = success   */
  --cm-viz-6:            #8D81F6;  /* roxo do card original da home */
  --cm-viz-7:            #E8A317;  /* = warning   */
  --cm-viz-8:            #4E6494;  /* = navy-400  */
  --cm-viz-grid:         #E3E9F0;
  --cm-viz-axis:         #646E87;

  /* ----------------------------------------------------------------------
     6. TIPOGRAFIA
     Display: Outfit (SIL OFL 1.1) · Texto/UI: Inter (SIL OFL 1.1)
     ---------------------------------------------------------------------- */
  --cm-font-display: "Outfit", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Só pilha do sistema — nenhuma webfont a mais. A v1.0 declarava JetBrains Mono
     e nunca a carregava, o que caía silenciosamente no ui-monospace de qualquer jeito. */
  --cm-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --cm-fw-regular:   400;
  --cm-fw-medium:    500;
  --cm-fw-semibold:  600;
  --cm-fw-bold:      700;
  --cm-fw-extrabold: 800;

  /* Escala fluida — TODOS os degraus saturam no MESMO ponto: 375px → 1280px.
     Acima de 1280 nada mais cresce, então a proporção entre degraus é
     constante em todo o intervalo de desktop. (v1.0 saturava entre 851 e
     1200px, cada token num ponto diferente — a hierarquia mudava com a
     largura.) Os extremos batem com typography.mobile/desktop do JSON. */
  --cm-fs-display-xl: clamp(2.3750rem, 1.7017rem + 2.8729vw, 4.0000rem);  /* 38 → 64 */
  --cm-fs-display-l:  clamp(2.0000rem, 1.4820rem + 2.2099vw, 3.2500rem);  /* 32 → 52 */
  --cm-fs-h1:         clamp(1.7500rem, 1.3097rem + 1.8785vw, 2.8125rem);  /* 28 → 45 */
  --cm-fs-h2:         clamp(1.6250rem, 1.2624rem + 1.5470vw, 2.5000rem);  /* 26 → 40 */
  --cm-fs-h3:         clamp(1.3750rem, 1.1678rem + 0.8840vw, 1.8750rem);  /* 22 → 30 */
  --cm-fs-h4:         clamp(1.1875rem, 1.0580rem + 0.5525vw, 1.5000rem);  /* 19 → 24 */
  --cm-fs-h5:         clamp(1.0625rem, 0.9848rem + 0.3315vw, 1.2500rem);  /* 17 → 20 */
  --cm-fs-lead:       clamp(1.0625rem, 0.9330rem + 0.5525vw, 1.3750rem);  /* 17 → 22 */
  --cm-fs-body-l:     clamp(1.0000rem, 0.9482rem + 0.2210vw, 1.1250rem);  /* 16 → 18 */
  --cm-fs-body:       1rem;
  --cm-fs-body-s:     0.875rem;
  --cm-fs-caption:    0.8125rem;
  --cm-fs-overline:   0.75rem;

  /* Line-height ÓPTICO — uma razão por degrau. Texto grande respira menos.
     Não reduzir a 5 razões genéricas: os extremos deixam de bater com o JSON. */
  --cm-lh-display-xl: 1.08;
  --cm-lh-display-l:  1.12;
  --cm-lh-h1:         1.16;
  --cm-lh-h2:         1.20;
  --cm-lh-h3:         1.27;
  --cm-lh-h4:         1.33;
  --cm-lh-h5:         1.40;
  --cm-lh-lead:       1.55;
  --cm-lh-body-l:     1.67;
  --cm-lh-body:       1.60;
  --cm-lh-body-s:     1.57;
  --cm-lh-caption:    1.38;
  --cm-lh-overline:   1.33;
  --cm-lh-button:     1.25;

  --cm-ls-display:    -0.02em;
  --cm-ls-heading:    -0.01em;
  --cm-ls-normal:     0;
  --cm-ls-overline:   0.08em;

  --cm-measure:       68ch;  /* largura máxima de linha — aplicar em .cm-prose */

  /* ----------------------------------------------------------------------
     7. ESPAÇAMENTO — base 4px
     ---------------------------------------------------------------------- */
  --cm-space-1:   0.25rem;  /*   4 */
  --cm-space-2:   0.5rem;   /*   8 */
  --cm-space-3:   0.75rem;  /*  12 */
  --cm-space-4:   1rem;     /*  16 */
  --cm-space-5:   1.25rem;  /*  20 */
  --cm-space-6:   1.5rem;   /*  24 */
  --cm-space-8:   2rem;     /*  32 */
  --cm-space-10:  2.5rem;   /*  40 */
  --cm-space-12:  3rem;     /*  48 */
  --cm-space-16:  4rem;     /*  64 */
  --cm-space-20:  5rem;     /*  80 */
  --cm-space-24:  6rem;     /*  96 */
  --cm-space-30:  7.5rem;   /* 120 */
  --cm-space-40:  10rem;    /* 160 */

  /* Ritmo de seção — satura em 1280px, igual à tipografia */
  --cm-space-section:       clamp(3.5000rem, 1.8425rem + 7.0718vw, 7.5000rem); /* 56 → 120 */
  --cm-space-section-tight: clamp(2.5000rem, 1.4641rem + 4.4199vw, 5.0000rem); /* 40 →  80 */

  /* ----------------------------------------------------------------------
     8. GRID E CONTAINER
     page-x e gutter são ESCALONADOS por media query (ver §14), não fluidos:
     o grid do Figma é escalonado, e uma curva linear nunca bateria com ele.
     ---------------------------------------------------------------------- */
  --cm-container:        1200px;  /* padrão — frame de 1440 */
  --cm-container-wide:   1320px;  /* faixas de logo, carrossel */
  --cm-container-text:   760px;   /* leitura longa */
  --cm-container-narrow: 520px;   /* formulário */
  --cm-page-x:           20px;    /* < 768 — ver §14 */
  --cm-gutter:           16px;    /* < 768 — ver §14 */

  /* ----------------------------------------------------------------------
     9. RAIO
     ---------------------------------------------------------------------- */
  --cm-radius-xs:   6px;
  --cm-radius-sm:   10px;
  --cm-radius-md:   14px;
  --cm-radius-lg:   20px;
  --cm-radius-xl:   28px;
  --cm-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     10. SOMBRAS — sempre tingidas de navy, nunca preto puro
     ---------------------------------------------------------------------- */
  --cm-shadow-xs:    0 1px 2px rgba(2, 26, 74, 0.06);
  --cm-shadow-sm:    0 2px 8px rgba(2, 26, 74, 0.08);
  --cm-shadow-md:    0 8px 24px rgba(2, 26, 74, 0.10);
  --cm-shadow-lg:    0 16px 40px rgba(2, 26, 74, 0.14);
  --cm-shadow-xl:    0 28px 64px rgba(2, 26, 74, 0.18);
  --cm-shadow-teal:  0 8px 24px rgba(1, 108, 121, 0.28);
  --cm-shadow-clima: 0 8px 24px rgba(11, 114, 133, 0.26);
  --cm-shadow-pulse: 0 8px 24px rgba(31, 31, 192, 0.26);
  --cm-shadow-flow:  0 8px 24px rgba(181, 78, 1, 0.26);

  /* ----------------------------------------------------------------------
     11. MOVIMENTO
     ---------------------------------------------------------------------- */
  --cm-dur-fast:    120ms;
  --cm-dur-base:    200ms;
  --cm-dur-slow:    320ms;
  --cm-dur-reveal:  520ms;
  --cm-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --cm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --cm-ease-in:     cubic-bezier(0.6, 0, 0.9, 0.4);

  /* ----------------------------------------------------------------------
     12. CAMADAS
     ---------------------------------------------------------------------- */
  --cm-z-base:      0;
  --cm-z-rail:      50;
  --cm-z-header:    100;
  --cm-z-dropdown:  200;
  --cm-z-overlay:   290;
  --cm-z-drawer:    300;
  --cm-z-modal:     400;
  --cm-z-toast:     500;

  /* ----------------------------------------------------------------------
     13. TAMANHOS
     ---------------------------------------------------------------------- */
  --cm-size-tap-min:       44px;  /* WCAG 2.5.5 */
  --cm-size-header:        72px;
  --cm-size-header-mobile: 64px;
  --cm-size-icon-xs:       14px;
  --cm-size-icon-sm:       16px;
  --cm-size-icon-md:       20px;
  --cm-size-icon-lg:       24px;
  --cm-size-icon-xl:       32px;
  --cm-size-icon-2xl:      48px;
  --cm-size-avatar-badge:  88px;

  /* Opacidade */
  --cm-opacity-disabled:  0.45;
  --cm-opacity-muted:     0.72;
  --cm-opacity-logo-rest: 0.85;  /* piso do logo de cliente em grayscale */
}

/* ==========================================================================
   14. GRID ESCALONADO — bate exatamente com core.grid.* do tokens.json
   Em ≥1440 a margem de 120px vem do max-width do container, não do padding.
   ========================================================================== */
@media (min-width: 768px)  { :root { --cm-page-x: 32px; --cm-gutter: 20px } }
@media (min-width: 1024px) { :root { --cm-page-x: 48px; --cm-gutter: 24px } }
@media (min-width: 1280px) { :root { --cm-page-x: 80px } }

/* ==========================================================================
   BREAKPOINTS (referência — custom properties não funcionam em @media)
     sm   480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px
   ESTRATÉGIA: desktop-first com max-width nos componentes, min-width apenas
   para o grid acima. Escolha deliberada — a escala fluida já resolve o
   intervalo intermediário, então não há por que duplicar cada componente.
   ========================================================================== */

/* ==========================================================================
   TEMA POR VERTICAL
   Aplique .theme-clima / .theme-pulse / .theme-flow no <body> ou na <section>.
   O contrato tem 12 propriedades e TODAS existem em TODOS os temas — um tema
   incompleto vaza o valor do ancestral em aninhamento.

   Garantias de contraste do contrato:
     accent          + accent-on       ≥ 4.5:1   (fill com rótulo branco)
     accent-on-soft  + accent-soft     ≥ 4.5:1   (texto sobre fundo tingido)
     accent-on-dark  + surface-dark    ≥ 4.5:1   (sobre painel navy)
     accent-border-strong sobre branco ≥ 3.0:1   (limite visual de controle)
     accent-border  é DECORATIVA — nunca como único limite de um controle.
   ========================================================================== */
:root,
.theme-brand {
  --cm-accent:              var(--cm-teal-700);   /* 6.14:1 */
  --cm-accent-strong:       var(--cm-teal-800);
  --cm-accent-text:         var(--cm-teal-700);
  --cm-accent-soft:         var(--cm-teal-50);
  --cm-accent-on-soft:      var(--cm-teal-700);   /* 5.55:1 sobre teal-50 */
  --cm-accent-border:       var(--cm-teal-200);   /* decorativa */
  --cm-accent-border-strong:var(--cm-teal-500);   /* 5.08:1 */
  --cm-accent-on:           var(--cm-white);
  --cm-accent-on-dark:      var(--cm-teal-300);   /* 6.41:1 sobre navy-700 */
  --cm-accent-display:      var(--cm-teal-600);
  --cm-accent-gradient:     var(--cm-brand-gradient);
  --cm-accent-shadow:       var(--cm-shadow-teal);
}

.theme-clima {
  --cm-accent:              var(--cm-clima-600);  /* 5.59:1 — era clima-500 (3.81, reprovava) */
  --cm-accent-strong:       var(--cm-clima-800);
  --cm-accent-text:         var(--cm-clima-600);
  --cm-accent-soft:         var(--cm-clima-50);
  --cm-accent-on-soft:      var(--cm-clima-700);  /* 5.48:1 sobre clima-50 */
  --cm-accent-border:       var(--cm-clima-300);
  --cm-accent-border-strong:var(--cm-clima-600);  /* 5.59:1 */
  --cm-accent-on:           var(--cm-white);
  --cm-accent-on-dark:      var(--cm-clima-300);  /* 7.45:1 */
  --cm-accent-display:      var(--cm-clima-500);  /* aqua puro, só display */
  --cm-accent-gradient:     var(--cm-clima-gradient);
  --cm-accent-shadow:       var(--cm-shadow-clima);
}

.theme-pulse {
  --cm-accent:              var(--cm-pulse-500);  /* 10.42:1 */
  --cm-accent-strong:       var(--cm-pulse-700);
  --cm-accent-text:         var(--cm-pulse-700);
  --cm-accent-soft:         var(--cm-pulse-50);
  --cm-accent-on-soft:      var(--cm-pulse-700);  /* 13.74:1 */
  --cm-accent-border:       var(--cm-pulse-300);
  --cm-accent-border-strong:var(--cm-pulse-500);  /* 10.42:1 */
  --cm-accent-on:           var(--cm-white);
  --cm-accent-on-dark:      var(--cm-pulse-300);  /* 5.07:1 */
  --cm-accent-display:      var(--cm-pulse-500);
  --cm-accent-gradient:     var(--cm-pulse-gradient);
  --cm-accent-shadow:       var(--cm-shadow-pulse);
}

.theme-flow {
  --cm-accent:              var(--cm-flow-700);   /* 5.18:1 — flow-500 reprovaria (2.98) */
  --cm-accent-strong:       var(--cm-flow-navy);
  --cm-accent-text:         var(--cm-flow-700);
  --cm-accent-soft:         var(--cm-flow-50);
  --cm-accent-on-soft:      var(--cm-flow-800);   /* 5.24:1 sobre flow-50 */
  --cm-accent-border:       var(--cm-flow-300);
  --cm-accent-border-strong:var(--cm-flow-700);   /* 5.18:1 */
  --cm-accent-on:           var(--cm-white);
  --cm-accent-on-dark:      var(--cm-flow-300);   /* 7.48:1 */
  --cm-accent-display:      var(--cm-flow-500);   /* o laranja da marca, só display ≥32px */
  --cm-accent-gradient:     var(--cm-flow-gradient);
  --cm-accent-shadow:       var(--cm-shadow-flow);
}

/* ==========================================================================
   PREFERÊNCIAS DO USUÁRIO
   ========================================================================== */

/* IMPORTANTE: reduced-motion não significa "mais rápido", significa "não anima".
   Zerar a duração resolve transição, mas para contador/reveal/donut o correto
   é NÃO animar — renderizar o valor final direto. Trate isso no JS, não aqui. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cm-dur-fast: 0.01ms;
    --cm-dur-base: 0.01ms;
    --cm-dur-slow: 0.01ms;
    --cm-dur-reveal: 0.01ms;
  }
  /* Rede de segurança: pega qualquer animação que escape dos tokens */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste do sistema — box-shadow não é pintado, o outline é */
@media (forced-colors: active) {
  :root {
    --cm-focus-ring:         0 0 0 3px Canvas, 0 0 0 6px Highlight;
    --cm-focus-ring-on-dark: 0 0 0 3px Canvas, 0 0 0 6px Highlight;
  }
}

/* Sem dark mode planejado. --cm-text-on-dark, --cm-focus-ring-on-dark e as
   variantes --on-dark significam "sobre superfície escura" (os painéis navy),
   não esquema escuro. Se um dia entrar, os #fff literais dos componentes são
   o custo — cada um precisa virar var(--cm-surface). */