/* ============================================================================
   MENTIS — DESIGN TOKENS  (alinhado ao design_handoff_mentis/README.md)
   Fonte de verdade única para TODAS as telas (front e admin).

   DIREÇÃO VISUAL (a tese): "instrumento de precisão".
   Calmo, exato, confiável — não espalhafatoso, não default de IA.
   Petróleo como primária · sálvia para leitura positiva · âmbar p/ 1 destaque.
   Tipografia: Hanken Grotesk (display/corpo) + Geist Mono (overlines/dados/siglas).

   Nota de compat: nomes de token legados (--font-display, --color-ink, etc.)
   foram PRESERVADOS e remapeados aos valores do handoff, para que
   admin-dashboard.html (que os consome) não quebre. As telas novas devem usar
   os tokens semânticos do handoff abaixo (--ink, --petrol, --sage, ...).
   ============================================================================ */

:root {
  color-scheme: light;

  /* ---- COR — PALETA EXATA DO HANDOFF -------------------------------------- */
  /* Petróleo / primária */
  --petrol:        #0E3C46;
  --petrol-hover:  #0B313A;
  --petrol-300:    #7FB0B8;
  --petrol-200:    #9EC1C8;
  --petrol-100:    #CFE0E3;
  --petrol-050:    #EAF1F2;

  /* Sálvia / sucesso & DISC-S */
  --sage:          #5B8A6F;
  --sage-hover:    #4C7A60;
  --sage-200:      #C6DCCE;
  --sage-100:      #D5E6DB;
  --sage-050:      #F1F7F2;

  /* Âmbar / atenção & disclaimer */
  --amber:         #D6A55A;
  --amber-bg:      #FBF4E6;
  --amber-border:  #EBDCBE;
  --amber-text:    #7A6320;

  /* Neutros (cool, baixíssima saturação) */
  --ink:           #16252A;   /* texto forte */
  --ink-2:         #41555A;   /* texto secundário */
  --ink-3:         #54656A;
  --ink-4:         #5B6B70;   /* terciário */
  /* Greys de TEXTO ajustados ao piso AA (≥4.5:1) contra os fundos off-white
     usados (white / #FBFCFB / #F6F8F7). Mantêm o mesmo hue cool/clínico do
     handoff (faixa de secundários #7A8A8E/#94A2A4), só com luminância suficiente
     para texto pequeno — exigência regulatória, não estética. */
  --muted:         #54656A;   /* secundário/legenda (AA 5.71 em bg) */
  --muted-2:       #5B6B70;   /* overlines/labels (AA 5.21 em bg) */
  --muted-3:       #5B6B70;   /* texto de-enfatizado (AA 5.21 em bg) */
  --muted-4:       #B6C2C0;   /* placeholder visual / "?" da matriz */
  --line:          #E2E8E6;   /* borda padrão */
  --line-2:        #E6EAE9;
  --line-3:        #EDF1EF;   /* divisores finos */
  --line-track:    #EAEFED;   /* trilho de barra/anel */
  --bg:            #F6F8F7;   /* fundo de tela / seção */
  --bg-2:          #FBFCFB;
  --surface:       #FFFFFF;   /* cartões internos */
  --frame-border:  #DCE3E1;   /* borda da moldura mobile */
  --canvas:        #E8ECEA;   /* fundo do canvas (fora da moldura) */

  /* DISC */
  --disc-d: #0E3C46;
  --disc-i: #D6A55A;
  --disc-s: #5B8A6F;
  --disc-c: #7E9098;

  /* Temperamento */
  --temp-colerico:   #0E3C46;
  --temp-sanguineo:  #D6A55A;
  --temp-melancolico:#7E9098;
  --temp-fleumatico: #5B8A6F;

  /* Estados semânticos */
  --success: var(--sage);
  --warning: var(--amber);
  --danger:  #C2553F;   /* terracota sóbria (nunca vermelho de urgência) */

  /* ---- TIPOGRAFIA --------------------------------------------------------- */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* Escala fluida (clamp → sem media query p/ texto). rem respeita o browser. */
  --text-overline: 0.6875rem; /* 11px — overlines mono */
  --text-xs:   0.75rem;       /* 12px */
  --text-sm:   0.8125rem;     /* 13px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);     /* 15–16px */
  --text-md:   1.0625rem;     /* 17px — opções de resposta */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);/* 18–21px */
  --text-xl:   clamp(1.5rem, 1.35rem + 0.7vw, 1.6875rem);  /* 24–27px — título tela */
  --text-2xl:  clamp(1.75rem, 1.55rem + 1vw, 1.9375rem);   /* 28–31px — hero */
  --text-hero: clamp(3.75rem, 3rem + 3.5vw, 4.5rem);       /* 60–72px — número de QI */

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

  --lh-tight: 1.07;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --tracking-tight:  -0.025em;
  --tracking-overline:0.12em;

  /* ---- ESPAÇAMENTO (escala 4px) ------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- RAIO --------------------------------------------------------------- */
  --radius-frame: 42px;  /* moldura mobile */
  --radius-card:  20px;  /* cartões grandes internos */
  --radius-card-sm: 18px;
  --radius-md:    14px;  /* botões / inputs / opções */
  --radius-sm:    13px;
  --radius-chip:  9px;
  --radius-pill:  7px;
  --radius-full:  999px;

  /* ---- BORDA / SOMBRA ----------------------------------------------------- */
  --border-hair: 1px solid var(--line);
  --shadow-frame: 0 4px 10px rgba(16,40,46,.05), 0 28px 60px rgba(16,40,46,.10);
  --shadow-sm: 0 1px 2px rgba(16,40,46,.06);
  --shadow-md: 0 4px 16px rgba(16,40,46,.08);

  /* ---- MOVIMENTO ---------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;

  /* ---- LAYOUT ------------------------------------------------------------- */
  --frame-w:        390px;
  --container-max:  1120px;
  --container-narrow: 640px;
  --touch-target:   48px;   /* CONTRATOS §4: alvo de toque ≥ 48px */

  /* z-index tokenizado (nunca 9999 solto) */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ====== ALIASES LEGADOS (compat admin-dashboard.html) ==================== */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --color-ink:        var(--ink);
  --color-ink-soft:   var(--ink-2);
  --color-mist:       var(--muted);
  --color-surface:    var(--surface);
  --color-surface-2:  var(--bg);
  --color-line:       var(--line);
  --color-sage:       var(--sage);
  --color-sage-deep:  var(--sage-hover);
  --color-amber:      var(--amber);
  --color-error:      var(--danger);
  --color-warning:    var(--warning);
  --color-info:       var(--petrol);
  --text-2xl-legacy:  var(--text-2xl);
  --weight-regular:   var(--w-regular);
  --weight-medium:    var(--w-medium);
  --weight-semibold:  var(--w-semibold);
  --weight-bold:      var(--w-bold);
  --weight-black:     var(--w-extrabold);
  --radius-lg:        var(--radius-card-sm);
  --shadow-lg:        0 12px 40px rgba(16,40,46,.12);
}

/* Reduce-motion é framework de adaptação (a11y cognitiva), não nice-to-have. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}