/* ============================================================
   tokens.css — Pergamino · Design Tokens
   Tema: "Lumen" — Pergaminho + Safira + Dourado
   Público: evangélico (meia-idade + jovens)

   ── GUIA RÁPIDO DE PERSONALIZAÇÃO ───────────────────────────
   Para trocar a identidade visual, edite APENAS o bloco :root.
   Cores em RGB sem vírgula → permitem usar rgb(var(--x) / .5).
   Trocar a cor de marca? Mude --c-brand e --c-brand-strong.
   ============================================================ */

:root {
  /* === BRAND (Safira) === */
  --c-brand:          124 58 237;   /* roxo safira — marca, nós atuais */
  --c-brand-strong:   109 40 217;   /* hover/active */
  --c-brand-soft:     243 240 255;  /* fundos suaves de marca */

  /* === GOLD (Dourado Pergamino — destaque sagrado) === */
  --c-gold:           212 146 15;   /* XP, conquistas, review */
  --c-gold-strong:    184 124 13;
  --c-gold-soft:      250 246 239;

  /* === STATES (nós da trilha) === */
  --c-completed:      16 185 129;   /* esmeralda — concluído */
  --c-completed-soft: 209 250 229;
  --c-current:        124 58 237;   /* safira — nó atual */
  --c-locked:         148 137 120;  /* cinza-pergaminho — bloqueado */
  --c-locked-soft:    232 223 200;
  --c-bonus:          212 146 15;   /* dourado — baú/bônus */
  --c-review:         212 146 15;   /* dourado — revisão */
  --c-premium:        124 58 237;   /* safira — conteúdo premium */

  /* === SEMANTIC === */
  --c-success:        16 185 129;
  --c-success-soft:   209 250 229;
  --c-error:          239 68 68;
  --c-error-soft:     254 226 226;
  --c-warning:        212 146 15;
  --c-warning-soft:   250 246 239;

  /* === SURFACES & TEXT === */
  --surface-bg:       242 235 217;  /* pergaminho — fundo da página */
  --surface-header:   20 36 70;     /* azul-noite — header/nav */
  --surface-card:     250 246 239;  /* creme — cards */
  --surface-muted:    232 223 200;  /* desabilitado/inativo */
  --surface-overlay:  44 30 18;     /* overlay (usar com /.6) */

  --text-primary:     44 30 18;     /* marrom escuro */
  --text-secondary:   74 55 40;
  --text-muted:       138 114 96;
  --text-inverted:    250 246 239;  /* sobre fundos escuros */
  --text-link:        184 124 13;

  /* === BORDERS === */
  --border-default:   221 208 184;
  --border-strong:    200 184 154;
  --border-focus:     124 58 237;

  /* === SPACING (escala 4px) === */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px;

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

  /* === SHADOW === */
  --shadow-sm:  0 1px 3px rgb(44 30 18 / .08), 0 1px 2px rgb(44 30 18 / .05);
  --shadow-md:  0 4px 16px rgb(44 30 18 / .08), 0 2px 6px rgb(44 30 18 / .05);
  --shadow-lg:  0 8px 32px rgb(44 30 18 / .10), 0 4px 12px rgb(44 30 18 / .06);
  --shadow-node: 0 6px 0 0;  /* sombra "3D" dos nós (usar com cor) */

  /* === TYPOGRAPHY === */
  --font-base:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-xs:   0.72rem;  --fs-sm:  0.85rem;  --fs-md:  0.95rem;
  --fs-lg:   1.1rem;   --fs-xl:  1.35rem;  --fs-2xl: 1.7rem;
  --fw-regular: 400;   --fw-medium: 600;   --fw-bold: 700;  --fw-black: 800;
  --lh-tight: 1.2;     --lh-normal: 1.5;   --lh-loose: 1.75;

  /* === Z-INDEX === */
  --z-base: 1;
  --z-bottomnav: 90;
  --z-header: 100;
  --z-overlay: 9000;
  --z-modal: 9999;

  /* === TRANSITIONS === */
  --t-fast:   .15s ease;
  --t-normal: .25s ease;
  --t-slow:   .4s ease;

  /* === LAYOUT === */
  --maxw-app: 480px;     /* coluna mobile-first centralizada */
  --header-h: 56px;
  --bottomnav-h: 64px;
}

/* ============================================================
   TEMA ESCURO — sobrescreve apenas o necessário
   ============================================================ */
[data-theme="dark"] {
  --c-brand-soft:     46 38 70;
  --c-gold-soft:      54 44 24;
  --c-completed-soft: 16 60 48;
  --c-locked:         120 110 98;
  --c-locked-soft:    48 44 38;

  --c-error-soft:     74 30 30;
  --c-success-soft:   16 60 48;
  --c-warning-soft:   54 44 24;

  --surface-bg:       22 20 28;     /* noite profunda */
  --surface-header:   14 14 22;
  --surface-card:     34 31 42;
  --surface-muted:    46 42 56;
  --surface-overlay:  0 0 0;

  --text-primary:     242 238 230;
  --text-secondary:   210 204 194;
  --text-muted:       158 150 140;
  --text-inverted:    242 238 230;
  --text-link:        212 168 80;

  --border-default:   58 52 68;
  --border-strong:    78 70 90;

  --shadow-sm:  0 1px 3px rgb(0 0 0 / .4);
  --shadow-md:  0 4px 16px rgb(0 0 0 / .45);
  --shadow-lg:  0 8px 32px rgb(0 0 0 / .55);
}

/* Respeita preferência do SO se nenhum tema explícito for setado */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-bg: 22 20 28;
    --surface-card: 34 31 42;
    --surface-muted: 46 42 56;
    --text-primary: 242 238 230;
    --text-secondary: 210 204 194;
    --text-muted: 158 150 140;
    --border-default: 58 52 68;
    --border-strong: 78 70 90;
    --c-brand-soft: 46 38 70;
    --c-gold-soft: 54 44 24;
    --c-completed-soft: 16 60 48;
    --c-locked-soft: 48 44 38;
  }
}