/* ============================================================
   MZK — Design tokens do quiz de qualificação
   IDENTIDADE INVIOLÁVEL. Single source of truth.
   Nunca hard-code cor/fonte/raio/sombra/espaçamento no HTML —
   sempre via var(--token). Derivado de mzk-lp/public/tokens.css.
   ============================================================ */
:root {
  /* — Marca — */
  --teal-900: #002028;
  --teal-850: #002b35;
  --teal-800: #00343f;
  --teal:     #004450;
  --teal-600: #00626f;
  --coral:    #fc6c5c;
  --coral-700:#e0513f;
  --green:    #00d07c;
  --green-700:#03a866;

  /* — Neutros — */
  --ink:      #07100f;
  --fog:      #eaf2f0;
  --fog-dim:  #a9c0bc;
  --muted:    #6f8a86;
  --line:     rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);

  /* — Papéis semânticos (use ESTES no HTML, não os brutos acima) — */
  --bg:            var(--teal-900);
  --bg-elevated:   var(--teal-850);
  --bg-card:       var(--teal-800);
  --text:          var(--fog);
  --text-dim:      var(--fog-dim);
  --text-muted:    var(--muted);
  --accent:        var(--green);       /* dominante: CTA, seleção, progresso */
  --accent-ink:    var(--ink);         /* texto sobre o acento */
  --alert:         var(--coral);       /* 2º plano: números, urgência */
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --border-active: var(--accent);

  /* — Tipografia — */
  --font-display: 'Plus Jakarta Sans', Calibri, system-ui, sans-serif;
  --font-body:    'DM Sans', Calibri, system-ui, sans-serif;

  --fs-hero:  clamp(2rem, 5.5vw, 3.25rem);
  --fs-h2:    clamp(1.35rem, 3.4vw, 2rem);
  --fs-lead:  clamp(1rem, 2.2vw, 1.2rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-xs:    .75rem;

  --lh-tight: 1.12;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* — Espaçamento (escala 4) — */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* — Geometria — */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --maxw:      680px;
  --z-banner:  10;
  --cookie-h:  14rem;   /* folga embaixo da página enquanto o banner está aberto */

  /* — Profundidade — */
  --shadow-card:  0 18px 50px -18px rgba(0, 0, 0, .45);
  --shadow-accent:0 14px 36px -12px rgba(0, 208, 124, .38);

  /* — Movimento — */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}