/* ============================================================
   Quiz Católico — Design Tokens
   Tradução fiel da Fase 1 (Figma, aprovada por Thiago 2026-05-26)
   Two-tier: Primitives -> Semantic. Dark-first "Night Vision".
   ============================================================ */

:root {
  /* ---------- PRIMITIVES: cor Duolingo ---------- */
  --color-duo-feather: #58CC02;   /* verde — ações positivas / catecismo */
  --color-duo-tree:    #58A700;   /* lift verde (degrau 3D) */
  --color-duo-bee:     #FFC800;   /* dourado — XP / bíblia */
  --color-duo-cardinal:#FF4B4B;   /* vermelho — vidas / canônico */
  --color-duo-fox:     #FF9600;   /* laranja — streak / espiritualidade */
  --color-duo-macaw:   #1CB0F6;   /* azul — info / história */
  --color-duo-beetle:  #CE82FF;   /* roxo — hagiologia */
  --color-duo-flamingo:#FF86D0;   /* rosa — liturgia */

  /* ---------- PRIMITIVES: Night Vision (superfícies) ---------- */
  --color-night-bg-0: #0E1518;
  --color-night-bg-1: #131F24;
  --color-night-bg-2: #202F36;
  --color-night-bg-3: #2A3D45;
  --color-night-bg-4: #37464F;

  /* ---------- PRIMITIVES: tinta ---------- */
  --color-ink-primary:   #F5F7F9;
  --color-ink-secondary: #AFB8BC;
  --color-ink-muted:     #7A8488;
  --color-ink-dark:      #332600;
  --color-ui-white:      #FFFFFF;

  /* ---------- SEMANTIC: superfícies ---------- */
  --surface-deep:    var(--color-night-bg-0);
  --surface-base:    var(--color-night-bg-1);
  --surface-card:    var(--color-night-bg-2);
  --surface-raised:  var(--color-night-bg-3);
  --surface-overlay: var(--color-night-bg-4);

  /* ---------- SEMANTIC: texto ---------- */
  --text-primary:    var(--color-ink-primary);
  --text-secondary:  var(--color-ink-secondary);
  --text-muted:      var(--color-ink-muted);
  --text-on-accent:  var(--color-ink-dark);
  --text-on-positive:var(--color-ink-primary);

  /* ---------- SEMANTIC: ação ---------- */
  --action-positive:      var(--color-duo-feather);
  --action-positive-lift: var(--color-duo-tree);
  --action-reward:        var(--color-duo-bee);
  --action-streak:        var(--color-duo-fox);
  --action-info:          var(--color-duo-macaw);

  /* ---------- SEMANTIC: feedback ---------- */
  --feedback-error:   var(--color-duo-cardinal);
  --feedback-success: var(--color-duo-feather);

  /* ---------- SEMANTIC: categorias temáticas ---------- */
  --category-catecismo:        var(--color-duo-feather);
  --category-biblia:           var(--color-duo-bee);
  --category-historia:         var(--color-duo-macaw);
  --category-hagiologia:       var(--color-duo-beetle);
  --category-canonico:         var(--color-duo-cardinal);
  --category-liturgia:         var(--color-duo-flamingo);
  --category-espiritualidade:  var(--color-duo-fox);

  /* ---------- SEMANTIC: bordas ---------- */
  --border-subtle: var(--color-night-bg-4);
  --border-strong: var(--color-ink-muted);

  /* ---------- ESPAÇAMENTO (escala 4px) ---------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---------- RAIO ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ---------- OPACIDADE ---------- */
  --opacity-disabled: 0.4;
  --opacity-dim:      0.5;
  --opacity-muted:    0.7;
  --opacity-full:     1;

  /* ---------- EFFECT STYLES (sombras) ---------- */
  /* Lift/Button — degrau 3D, blur 0, só eixo Y (marca Duolingo) */
  --lift-button:        0 4px 0 0 var(--color-duo-tree);
  --lift-button-pressed:0 1px 0 0 var(--color-duo-tree);
  /* Elevações tintadas em bg-0 (não preto puro) */
  --elevation-card:     0 2px 8px 0 rgba(14,21,24,0.40);
  --elevation-sheet:    0 -4px 24px 0 rgba(14,21,24,0.50);
  --elevation-floating: 0 8px 24px 0 rgba(14,21,24,0.45);
  --glow-halo:          0 0 24px 4px rgba(255,200,0,0.35);

  /* ---------- MOVIMENTO (durações + easings, fundacional §3.7.1) ---------- */
  --t-instant: 80ms;
  --t-fast: 180ms;
  --t-default: 250ms;
  --t-modal: 400ms;
  --t-celebration: 700ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- TIPOGRAFIA (famílias) ---------- */
  --font-ui:     'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'STIX Two Text', Georgia, serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* ====== TYPE RAMP (14 estilos da Fase 1) ====== */
.t-display-hero   { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -0.4px; }
.t-display-title  { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -0.14px; }
.t-h1   { font-family: var(--font-ui); font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -0.14px; }
.t-h2   { font-family: var(--font-ui); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.055px; }
.t-h3   { font-family: var(--font-ui); font-weight: 700; font-size: 18px; line-height: 24px; }
.t-body-lg { font-family: var(--font-ui); font-weight: 600; font-size: 17px; line-height: 26px; }
.t-body    { font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 24px; }
.t-body-sm { font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 20px; }
.t-label-btn  { font-family: var(--font-ui); font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: 0.16px; }
.t-label-caps { font-family: var(--font-ui); font-weight: 800; font-size: 12px; line-height: 16px; letter-spacing: 0.72px; text-transform: uppercase; }
.t-caption { font-family: var(--font-ui); font-weight: 600; font-size: 12px; line-height: 16px; }
.t-num-score   { font-family: var(--font-mono); font-weight: 700; font-size: 32px; line-height: 36px; letter-spacing: -0.32px; font-variant-numeric: tabular-nums; }
.t-num-counter { font-family: var(--font-mono); font-weight: 600; font-size: 18px; line-height: 22px; font-variant-numeric: tabular-nums; }
.t-num-inline  { font-family: var(--font-mono); font-weight: 600; font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-instant: 0ms; --t-fast: 0ms; --t-default: 0ms; --t-modal: 0ms; --t-celebration: 0ms; }
}