/* ==========================================================================
   Shape — tokens.css (design system oficial · v1.0 · 04/10/2026)
   Conceito vencedor: CARTAZ (Energia Brasileira) + enxertos do júri.
   Fonte da verdade: docs/DESIGN.md. iOS/watchOS geram ShapeTokens.swift e o
   Asset Catalog a partir DESTE arquivo (mesmos nomes, ver DESIGN.md §12).
   --------------------------------------------------------------------------
   Arquitetura em 2 camadas (troca de conceito = troca de tokens):
     1. PRIMITIVAS  --p-*   valores crus. Nenhum componente usa direto.
     2. SEMÂNTICOS  --bg, --txt, --accent, --mod-*, --rd-*, --st-* ...
        Componentes (web e SwiftUI) só leem semânticos. Um "skin" (outro
        conceito) redefine semânticos + assinatura (--sig-*), nunca estrutura.
   Regras de cor (não negociáveis, DESIGN.md §3):
     - Brasa = AÇÃO e MARCA (CTA, o ponto, foco no escuro, cursor "agora").
       Nunca estado, zona, prontidão ou modalidade.
     - "Frio informa, quente chama para a ação": estado do corpo em tons frios
       (verde → azul → lilás), nunca vermelho/laranja/amarelo.
     - Papel = treino (cartazes por modalidade). Placa tinta = corpo
       (prontidão, sono e VFC vivem SEMPRE sobre a placa, nos dois temas).
     - Texto sobre Brasa e sobre papéis = tinta (#14110F). Branco sobre Brasa
       reprova (2,87:1).
     - Estado nunca só por cor: sempre palavra + forma/posição.
     - Comida e bebida nunca em vermelho.
   Contrastes (WCAG 2.x) e ΔE2000 sob daltonismo (Machado 2009) estão em
   DESIGN.md §3.6 — todos os pares de prontidão, aderência e zonas vizinhas
   ficam ≥ 20 em visão normal, deuteranopia e protanopia.
   Fontes: @font-face em public/assets/css/fonts.css (self-hosted, D5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVAS
   -------------------------------------------------------------------------- */
:root {
  /* Núcleo: tinta, papel, brasa */
  --p-tinta:        #14110F;  /* preto quente                     */
  --p-papel:        #FBF6EF;  /* papel de cartaz                  */
  --p-branco:       #FFFFFF;
  --p-preto:        #000000;  /* Watch (OLED), placa no escuro    */

  --p-brasa-100:    #FFE6D6;
  --p-brasa-300:    #FF8A47;
  --p-brasa-500:    #FF6A1A;  /* a cor da marca                   */
  --p-brasa-600:    #E85400;
  --p-brasa-700:    #B93A0A;  /* brasa como texto no claro 5,32:1 */
  --p-brasa-900:    #3A1C0E;

  /* Areia (neutros quentes do claro) */
  --p-areia-100:    #F4EDE3;
  --p-areia-150:    #EFE7DB;
  --p-areia-200:    #E9E0D4;
  --p-areia-300:    #D6CABB;
  --p-areia-500:    #8C8174;  /* borda de campo: 3,81:1 no branco */
  --p-areia-600:    #736A61;  /* texto terciário: 4,93:1 no papel */
  --p-areia-700:    #5E5751;
  --p-areia-800:    #3B3531;

  /* Asfalto (escuro) */
  --p-asfalto-0:    #080706;
  --p-asfalto-1:    #0E0C0B;
  --p-asfalto-2:    #1A1715;
  --p-asfalto-3:    #25211E;
  --p-asfalto-4:    #332D29;
  --p-asfalto-5:    #403934;
  --p-creme:        #F7F2EA;  /* texto no escuro 16:1             */
  --p-creme-2:      #B3AAA0;
  --p-creme-3:      #A0978D;

  /* Papéis de cartaz (momentos). Tinta por cima sempre. */
  --p-choque:       #FF3D8B;  /* força          5,63:1 com tinta  */
  --p-limao:        #B6F23A;  /* corrida       14,10:1            */
  --p-piscina:      #2ED6C8;  /* bike          10,36:1            */
  --p-maracuja:     #FFD21F;  /* dia do teste  12,97:1            */
  --p-acai:         #2A1036;  /* recaps (texto papel 15,93:1)     */
  --p-acai-2:       #3B1A4A;

  /* Prontidão — família fria; ΔE2000 ≥ 20 entre TODOS os pares (normal/deut/prot) */
  --p-rd-pronto:    #9BF7B4;  /* ≥ 75   menta clara              */
  --p-rd-ok:        #22A85E;  /* 60–74  verde                    */
  --p-rd-leve:      #3B6FEA;  /* 40–59  azul                     */
  --p-rd-recupere:  #DDB3FF;  /* < 40   lilás (nunca vermelho)   */
  --p-rd-off-claro: #3A3430;  /* raio apagado na placa           */

  /* Aderência ao alvo (treino ao vivo) — frio abaixo, quente acima */
  --p-abaixo:       #5A90FF;
  --p-dentro:       #79F7B9;
  --p-acima:        #F5304F;

  /* Zonas (convenção Zwift/MyWhoosh; vizinhas ≥ 20 ΔE em normal/deut/prot) */
  --p-z1:           #C3CAD6;  /* Muito leve */
  --p-z2:           #4DA3FF;  /* Leve       */
  --p-z3:           #14A06A;  /* Moderado   */
  --p-z4:           #FFC21A;  /* Forte      */
  --p-z5:           #F23D6B;  /* Muito forte*/

  /* Sono (só sobre a placa) */
  --p-sono-acordado: #F4E3C1;
  --p-sono-rem:      #D2AEFF;
  --p-sono-leve:     #5E9BFF;
  --p-sono-profundo: #3A5BD9;

  /* Feedback do sistema (formulário, toast, cartão de alerta de saúde) */
  --p-sucesso-700:  #0B6B3A;  --p-sucesso-100: #E1F5E9;
  --p-perigo-700:   #A8201A;  --p-perigo-100:  #FDECEA;  --p-perigo-300: #FF8A80;
  --p-info-700:     #1F55C2;  --p-info-100:    #E5EEFF;
}

/* Display P3: os papéis "acendem" no iPhone/Mac (fallback sRGB acima) */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --p-brasa-500: color(display-p3 1 0.43 0.13);
      --p-choque:    color(display-p3 1 0.27 0.56);
      --p-limao:     color(display-p3 0.74 0.95 0.30);
      --p-piscina:   color(display-p3 0.27 0.84 0.78);
      --p-maracuja:  color(display-p3 1 0.83 0.20);
    }
  }
}

/* --------------------------------------------------------------------------
   2. SEMÂNTICOS QUE NÃO MUDAM COM O TEMA
   -------------------------------------------------------------------------- */
:root {
  /* Marca e ação */
  --brand:          var(--p-brasa-500);   /* o ponto                       */
  --accent:         var(--p-brasa-500);   /* CTA                           */
  --txt-on-accent:  var(--p-tinta);       /* 6,56:1                        */
  --ink:            var(--p-tinta);       /* tinta dos cartazes            */
  --paper:          var(--p-papel);

  /* Modalidade → papel do cartaz (app: cartaz do dia, azulejo; cartão: fundo padrão) */
  --mod-forca:      var(--p-choque);
  --mod-corrida:    var(--p-limao);
  --mod-bike:       var(--p-piscina);
  --mod-caminhada:  var(--p-limao);
  --on-mod:         var(--p-tinta);
  /* Papéis de momento */
  --paper-marco:    var(--p-brasa-500);   /* 4/8/12/26/52 semanas, 10/25/50/100 treinos */
  --paper-teste:    var(--p-maracuja);    /* dia do teste (FTP, força)     */
  --paper-recap:    var(--p-acai);        /* semana, mês, ano              */
  --on-recap:       var(--p-papel);

  /* Prontidão (gráfico sobre a placa; palavra sempre junto) */
  --rd-pronto:      var(--p-rd-pronto);
  --rd-ok:          var(--p-rd-ok);
  --rd-leve:        var(--p-rd-leve);
  --rd-recupere:    var(--p-rd-recupere);

  /* Zonas e sono (dados) */
  --z1: var(--p-z1); --z2: var(--p-z2); --z3: var(--p-z3); --z4: var(--p-z4); --z5: var(--p-z5);
  --on-z: var(--p-tinta);
  --sono-acordado: var(--p-sono-acordado); --sono-rem: var(--p-sono-rem);
  --sono-leve: var(--p-sono-leve); --sono-profundo: var(--p-sono-profundo);

  /* Aderência — preenchimento (faixa do ERG, pílula do Watch; texto tinta por cima) */
  --st-abaixo-fill: var(--p-abaixo);
  --st-dentro-fill: var(--p-dentro);
  --st-acima-fill:  var(--p-acima);
  --on-st:          var(--p-tinta);

  /* ---------------- Tipografia ---------------- */
  --font-display: "Archivo", "Archivo Fallback", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui:      "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voz:     "Instrument Serif", "New York", "Iowan Old Style", Georgia, serif;  /* Coach IA (D1) */
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;      /* códigos   */

  --wdth-num:     62%;   /* números-herói  ↔ SF .compressed */
  --wdth-head:    72%;   /* títulos        ↔ SF .condensed  */
  --wdth-ui:      100%;  /* interface      ↔ SF .standard   */
  --wdth-kicker:  118%;  /* rótulos-caixa  ↔ SF .expanded   */

  --fw-ui: 450; --fw-ui-med: 550; --fw-ui-bold: 650;
  --fw-head: 850; --fw-num: 900; --fw-kicker: 750;

  /* Escala de texto (~1,25) — mínimo de interface 13 px; corpo 16 */
  --fs-11: 0.6875rem; --fs-12: 0.75rem;  --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-16: 1rem;      --fs-18: 1.125rem; --fs-20: 1.25rem;   --fs-24: 1.5rem;
  --fs-30: 1.875rem;  --fs-36: 2.25rem;  --fs-48: 3rem;      --fs-64: 4rem;
  /* Escala de números (~1,41; condensado 62 %) */
  --num-xs:   1.75rem;  /* 28  lista densa           */
  --num-s:    2.25rem;  /* 36  métrica em lista      */
  --num-m:    3.5rem;   /* 56  card de métrica       */
  --num-l:    5.5rem;   /* 88  herói de card / Watch */
  --num-xl:   7.5rem;   /* 120 player, timer         */
  --num-mega: 10rem;    /* 160 landing, cartão       */
  --num-erg:  18.75rem; /* 300 Bike ERG (2 m)        */

  --lh-num: 0.82; --lh-head: 0.92; --lh-ui: 1.45; --lh-tight: 1.2; --lh-voz: 1.25;
  --tr-num: -0.02em; --tr-head: -0.012em; --tr-kicker: 0.08em;

  /* ---------------- Espaço, grid, raio, alvo ---------------- */
  --s-0: 2px;  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px;
  --s-12: 96px; --s-13: 128px;

  --grid-cols: 4;  --grid-gutter: 16px; --grid-margin: 16px;  /* < 768   */
  --container: 1312px;
  --sb-w: 264px; --sb-wc: 76px;                               /* sidebar */

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;
  --r-btn: 14px; --r-field: 14px; --r-card: 20px; --r-sheet: 28px;

  --tap: 44px;     /* mínimo absoluto        */
  --tap-md: 48px;  /* ações secundárias no treino (mão suada) */
  --tap-lg: 56px;  /* botões principais      */
  --tap-xl: 96px;  /* "Feito"                */

  /* ---------------- Movimento ---------------- */
  --dur-tap:   90ms;   /* resposta ao toque (escala .97)  */
  --dur-fast:  160ms;  /* chips, troca de etapa, faixa    */
  --dur-slam:  240ms;  /* número que "bate"               */
  --dur-cola:  360ms;  /* cartaz que "cola" (entrada)     */
  --dur-sheet: 420ms;  /* folha/modal                     */
  --dur-party: 600ms;  /* teto de qualquer celebração     */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in:      cubic-bezier(.55, 0, 1, .45);
  --ease-inout:   cubic-bezier(.65, 0, .35, 1);
  --ease-slam:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-carimbo: cubic-bezier(.5, 0, .75, 0);

  /* ---------------- Camadas ---------------- */
  --z-base: 1; --z-sticky: 20; --z-tab: 50; --z-sheet: 80; --z-toast: 90; --z-alert: 100;

  /* ---------------- Assinatura do conceito (troca junto com o skin) ---------------- */
  --sig-poster-radius: 26px;          /* cartaz do treino do dia            */
  --sig-plate-radius:  24px;          /* placa de prontidão/sono            */
  --sig-stamp-rotate:  -9deg;         /* carimbo Tá pago                    */
  --sig-sticker-shadow: 6px 6px 0 var(--p-tinta);  /* adesivo / cartaz colado */
  --sig-num-family: var(--font-display);
  --sig-num-wdth:   var(--wdth-num);
  --sig-num-weight: var(--fw-num);
}

/* --------------------------------------------------------------------------
   3. TEMA CLARO (padrão) — "papel"
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:            var(--p-papel);
  --bg-elev:       var(--p-branco);
  --bg-elev-2:     var(--p-areia-100);
  --bg-sunken:     var(--p-areia-150);
  --bg-plate:      var(--p-tinta);       /* placa do corpo (prontidão, sono)  */
  --bg-overlay:    rgba(20, 17, 15, .52);
  --bg-bar:        rgba(251, 246, 239, .88);  /* tab bar / topbar */

  --txt:           var(--p-tinta);       /* 17,49:1 */
  --txt-2:         var(--p-areia-700);   /*  6,60:1 */
  --txt-3:         var(--p-areia-600);   /*  4,93:1 — mínimo para texto */
  --txt-plate:     var(--p-creme);
  --txt-plate-2:   var(--p-creme-2);

  --brd:           var(--p-areia-200);   /* divisória (decorativa)      */
  --brd-strong:    var(--p-areia-300);
  --brd-field:     var(--p-areia-500);   /* contorno de campo ≥ 3:1     */
  --plate-brd:     transparent;

  --accent-press:  var(--p-brasa-600);
  --accent-text:   var(--p-brasa-700);   /* link/realce: 5,32:1 no papel */
  --accent-soft:   var(--p-brasa-100);
  --focus-ring:    var(--p-tinta);       /* brasa no papel não dá 3:1   */
  --brand-dot:     var(--p-brasa-500);

  --rd-off:        var(--p-rd-off-claro);

  /* Aderência em texto/fundo suave (chips, resultado por etapa) */
  --st-abaixo: #1C55C9; --st-abaixo-soft: #E6EEFF;  /* 5,65:1 */
  --st-dentro: #0B7343; --st-dentro-soft: #DDF7EA;  /* 5,23:1 */
  --st-acima:  #B8183A; --st-acima-soft:  #FFE4E9;  /* 5,43:1 */

  /* Feedback */
  --sucesso: var(--p-sucesso-700); --sucesso-soft: var(--p-sucesso-100);  /* 5,80:1 */
  --perigo:  var(--p-perigo-700);  --perigo-soft:  var(--p-perigo-100);   /* 6,36:1 */
  --info:    var(--p-info-700);    --info-soft:    var(--p-info-100);     /* 5,74:1 */
  --aviso:   #7A5200;              --aviso-soft:   #FFF4D1;               /* 6,1:1 (só sistema: "dado atrasado", modo teste) */

  --chart-grid: rgba(20, 17, 15, .08);
  --chart-axis: var(--p-areia-600);
  --chart-line: var(--p-tinta);

  --sh-1: 0 1px 2px rgba(20,17,15,.06), 0 1px 1px rgba(20,17,15,.04);
  --sh-2: 0 10px 24px -8px rgba(20,17,15,.16), 0 2px 4px rgba(20,17,15,.05);
  --sh-3: 0 28px 56px -18px rgba(20,17,15,.34), 0 4px 10px rgba(20,17,15,.06);
  --card-ring: 0 0 0 1px rgba(20,17,15,.05);
}

/* --------------------------------------------------------------------------
   4. TEMA ESCURO — "asfalto" (preferência do sistema e escolha explícita)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--p-asfalto-1); --bg-elev: var(--p-asfalto-2); --bg-elev-2: var(--p-asfalto-3); --bg-sunken: var(--p-asfalto-0);
    --bg-plate: var(--p-preto); --bg-overlay: rgba(0,0,0,.64); --bg-bar: rgba(14,12,11,.88);
    --txt: var(--p-creme); --txt-2: var(--p-creme-2); --txt-3: var(--p-creme-3);
    --txt-plate: var(--p-creme); --txt-plate-2: var(--p-creme-2);
    --brd: #2E2925; --brd-strong: var(--p-asfalto-5); --brd-field: #7A7067; --plate-brd: rgba(255,255,255,.09);
    --accent-press: var(--p-brasa-300); --accent-text: var(--p-brasa-500); --accent-soft: var(--p-brasa-900);
    --focus-ring: var(--p-brasa-500); --brand-dot: var(--p-brasa-500); --rd-off: #2E2925;
    --st-abaixo: #7FA8FF; --st-abaixo-soft: #132140;
    --st-dentro: #79F7B9; --st-dentro-soft: #0D2A1E;
    --st-acima:  #FF6B81; --st-acima-soft:  #3A1019;
    --sucesso: #6FE3A2; --sucesso-soft: #0D2A1E; --perigo: var(--p-perigo-300); --perigo-soft: #3A1513;
    --info: #8DB4FF; --info-soft: #132140; --aviso: #FFCC33; --aviso-soft: #2E2508;
    --chart-grid: rgba(247,242,234,.08); --chart-axis: var(--p-creme-3); --chart-line: var(--p-creme);
    --sh-1: 0 0 0 1px rgba(255,255,255,.04);
    --sh-2: 0 0 0 1px rgba(255,255,255,.06), 0 14px 28px -10px rgba(0,0,0,.7);
    --sh-3: 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -18px rgba(0,0,0,.85);
    --card-ring: 0 0 0 1px rgba(255,255,255,.05);
    --sig-sticker-shadow: 6px 6px 0 var(--p-brasa-500);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--p-asfalto-1); --bg-elev: var(--p-asfalto-2); --bg-elev-2: var(--p-asfalto-3); --bg-sunken: var(--p-asfalto-0);
  --bg-plate: var(--p-preto); --bg-overlay: rgba(0,0,0,.64); --bg-bar: rgba(14,12,11,.88);
  --txt: var(--p-creme); --txt-2: var(--p-creme-2); --txt-3: var(--p-creme-3);
  --txt-plate: var(--p-creme); --txt-plate-2: var(--p-creme-2);
  --brd: #2E2925; --brd-strong: var(--p-asfalto-5); --brd-field: #7A7067; --plate-brd: rgba(255,255,255,.09);
  --accent-press: var(--p-brasa-300); --accent-text: var(--p-brasa-500); --accent-soft: var(--p-brasa-900);
  --focus-ring: var(--p-brasa-500); --brand-dot: var(--p-brasa-500); --rd-off: #2E2925;
  --st-abaixo: #7FA8FF; --st-abaixo-soft: #132140;
  --st-dentro: #79F7B9; --st-dentro-soft: #0D2A1E;
  --st-acima:  #FF6B81; --st-acima-soft:  #3A1019;
  --sucesso: #6FE3A2; --sucesso-soft: #0D2A1E; --perigo: var(--p-perigo-300); --perigo-soft: #3A1513;
  --info: #8DB4FF; --info-soft: #132140; --aviso: #FFCC33; --aviso-soft: #2E2508;
  --chart-grid: rgba(247,242,234,.08); --chart-axis: var(--p-creme-3); --chart-line: var(--p-creme);
  --sh-1: 0 0 0 1px rgba(255,255,255,.04);
  --sh-2: 0 0 0 1px rgba(255,255,255,.06), 0 14px 28px -10px rgba(0,0,0,.7);
  --sh-3: 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -18px rgba(0,0,0,.85);
  --card-ring: 0 0 0 1px rgba(255,255,255,.05);
  --sig-sticker-shadow: 6px 6px 0 var(--p-brasa-500);
}

/* Modo treino (player web, Bike ERG) e Watch: preto OLED, independente do tema do sistema.
   :root[data-surface] empata em especificidade com o ":root:not([data-theme=light])" do escuro do sistema e vence por vir
   depois: sem ele, o bike.php (data-surface na <html>) virava asfalto quando o sistema estava no escuro. */
:root[data-surface="treino"],
[data-surface="treino"],
[data-theme="watch"] {
  color-scheme: dark;
  --bg: var(--p-preto); --bg-elev: #161311; --bg-elev-2: #241F1C; --bg-sunken: var(--p-preto); --bg-plate: var(--p-preto);
  --txt: #FFFFFF; --txt-2: #C9C1B8; --txt-3: var(--p-creme-3);
  --txt-plate: #FFFFFF; --txt-plate-2: #C9C1B8;
  --brd: #2E2925; --brd-strong: var(--p-asfalto-5); --brd-field: #7A7067; --plate-brd: rgba(255,255,255,.09);
  --accent-press: var(--p-brasa-300); --accent-text: var(--p-brasa-500); --accent-soft: var(--p-brasa-900);
  --focus-ring: var(--p-brasa-500); --brand-dot: var(--p-brasa-500); --rd-off: #2E2925;
  --st-abaixo: #7FA8FF; --st-dentro: #79F7B9; --st-acima: #FF6B81;
  --st-abaixo-soft: #132140; --st-dentro-soft: #0D2A1E; --st-acima-soft: #3A1019;
  --sucesso: #6FE3A2; --sucesso-soft: #0D2A1E; --perigo: var(--p-perigo-300); --perigo-soft: #3A1513;
  --info: #8DB4FF; --info-soft: #132140; --aviso: #FFCC33; --aviso-soft: #2E2508;
  --chart-grid: rgba(255,255,255,.08); --chart-axis: var(--p-creme-3); --chart-line: #FFFFFF;
  --sh-1: none; --sh-2: none; --sh-3: none; --card-ring: 0 0 0 1px rgba(255,255,255,.06);
}

/* --------------------------------------------------------------------------
   5. COMPATIBILIDADE MCentral/MVenda (ARCHITECTURE §6.3)
   Os componentes herdados (.card, .btn-primary, .badge-*, .alert .a-*,
   .modal-*, .spin, .pag-bar) continuam funcionando: os nomes antigos apontam
   para os semânticos novos. Redeclarado em todo escopo que troca de tema,
   porque var() dentro de custom property resolve onde é declarado.
   ATENÇÃO: --txt-on-pri deixa de ser branco (reprovava: 2,87:1) e vira tinta.
   -------------------------------------------------------------------------- */
:root, [data-theme], [data-surface], [data-skin] {
  --pri: var(--accent); --pri-lt: var(--p-brasa-300); --pri-ltr: var(--accent-soft); --pri-dk: var(--accent-press);
  --txt-on-pri: var(--txt-on-accent);
  --bg-card: var(--bg-elev); --bg-input: var(--bg-elev-2); --bg-sidebar: var(--bg-elev);
  --brd-lt: var(--brd); --txt2: var(--txt-2); --txt3: var(--txt-3);
  --green: var(--sucesso); --green-s: var(--sucesso-soft); --red: var(--perigo); --red-s: var(--perigo-soft);
  --yellow: var(--aviso); --yellow-s: var(--aviso-soft); --blue: var(--info); --blue-s: var(--info-soft);
  --font: var(--font-ui);
  --shadow: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3);
  --ease: var(--ease-out);
}

/* --------------------------------------------------------------------------
   6. PREFERÊNCIAS DE ACESSIBILIDADE
   -------------------------------------------------------------------------- */
/* Mais contraste: terciário vira secundário, divisórias e campos mais fortes, foco mais grosso */
@media (prefers-contrast: more) {
  :root {
    --txt-3: var(--txt-2);
    --brd: var(--brd-strong);
    --brd-field: var(--txt-2);
    --card-ring: 0 0 0 1.5px var(--brd-strong);
  }
}
/* Menos transparência: barras opacas (sem vidro atrás de número) */
@media (prefers-reduced-transparency: reduce) {
  :root { --bg-bar: var(--bg-elev); --bg-overlay: rgba(20,17,15,.78); }
}
/* Movimento reduzido: tudo vira estado final instantâneo */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tap: 0ms; --dur-fast: 0ms; --dur-slam: 0ms; --dur-cola: 0ms; --dur-sheet: 0ms; --dur-party: 0ms;
  }
}
/* Alto contraste do Windows: deixa o sistema mandar nas cores */
@media (forced-colors: active) {
  :root { --focus-ring: Highlight; --brd: CanvasText; --brd-field: CanvasText; }
}

/* --------------------------------------------------------------------------
   7. GRID RESPONSIVO (mobile-first)
   -------------------------------------------------------------------------- */
@media (min-width: 768px)  { :root { --grid-cols: 8;  --grid-gutter: 20px; --grid-margin: 32px; } }
@media (min-width: 1200px) { :root { --grid-cols: 12; --grid-gutter: 24px; --grid-margin: 64px; } }