/* ═══════════════════════════════════════════════════════════════
   CODEX D'ARTASIA — Design Tokens
   Charte graphique Gestionnaire JDR Pathfinder 2e
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs : surfaces (parchemin sombre, tons chauds) ─────── */
  --ink-bg:           #14100c;   /* fond app, plus profond */
  --ink-surface:      #1c1610;   /* surface principale (cartes) */
  --ink-surface-2:    #261d15;   /* surface élevée (modales, hovers) */
  --ink-surface-3:    #322619;   /* surface très élevée */
  --ink-rule:         #3d2f22;   /* trait subtil */
  --ink-rule-strong:  #5a4530;   /* trait emphasisé */

  /* ── Couleurs : encre (texte) ──────────────────────────────── */
  --parchment:        #f0e6d2;   /* texte primaire — parchemin clair */
  --parchment-dim:    #c4b89e;   /* texte secondaire */
  --parchment-mute:   #8a7e66;   /* texte tertiaire / placeholder */
  --parchment-faint:  #5a5040;   /* labels désactivés */

  /* ── Or (filets, ornements, accents discrets) ──────────────── */
  --gold:             #c9a24a;   /* filets dorés */
  --gold-soft:        #b8945a;   /* or atténué */
  --gold-deep:        #8a6f3a;   /* or sombre / hover state */
  --gold-glow:        rgba(201, 162, 74, 0.25);
  --gold-veil:        rgba(201, 162, 74, 0.08);

  /* ── Améthyste (accent principal — arcanique) ─────────────── */
  --amethyst:         #a888d4;
  --amethyst-soft:    #8a6fb8;
  --amethyst-deep:    #6a4f98;
  --amethyst-glow:    rgba(168, 136, 212, 0.28);
  --amethyst-veil:    rgba(168, 136, 212, 0.10);

  /* ── Sémantiques (relations / statuts) ────────────────────── */
  --moss:             #8fb572;   /* allié, positif, actif */
  --moss-deep:        #5d8a4a;
  --ember:            #c4584a;   /* ennemi, danger, mort */
  --ember-deep:       #8f3a30;
  --amber-warn:       #d9a849;   /* disparu, warning */
  --amber-deep:       #a07a30;
  --rose:             #d68aa0;   /* émotionnel */
  --rose-deep:        #a35e75;
  --sky:              #6a9bb8;   /* info, neutre froid */
  --sky-deep:         #486f88;

  /* Couleurs sémantiques par groupe de relations (pris du fichier source) */
  --rel-positive:     #8fb572;   /* Positives */
  --rel-emotion:      #d68aa0;   /* Émotionnel */
  --rel-pro:          #a888d4;   /* Professionnelles */
  --rel-neutral:      #b0a890;   /* Neutres */
  --rel-negative:     #c4584a;   /* Négatives */
  --rel-complex:      #d99a5a;   /* Complexes */

  /* ── Échelle typographique ────────────────────────────────── */
  --font-display:     'Cinzel', 'Cormorant Garamond', serif;       /* Titres majeurs (h1, app) */
  --font-serif:       'Cormorant Garamond', 'EB Garamond', serif;  /* Titres secondaires, citations */
  --font-prose:       'EB Garamond', 'Crimson Pro', Georgia, serif;/* Corps narratif (histoires) */
  --font-ui:          'Inter', system-ui, -apple-system, sans-serif;/* UI, labels, boutons */
  --font-mono:        'JetBrains Mono', ui-monospace, monospace;   /* Données tabulaires */

  --fs-display:       clamp(28px, 4vw, 44px);
  --fs-h1:            28px;
  --fs-h2:            22px;
  --fs-h3:            18px;
  --fs-body:          15px;
  --fs-prose:         16px;
  --fs-ui:            13px;
  --fs-label:         11px;
  --fs-meta:          12px;

  --lh-display:       1.15;
  --lh-heading:       1.25;
  --lh-body:          1.55;
  --lh-prose:         1.65;

  --tracking-display: 0.06em;    /* Cinzel respire en majuscules */
  --tracking-label:   0.14em;    /* labels en petites caps */
  --tracking-tight:   -0.01em;

  /* ── Espacement (multiples de 4px) ────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Rayons ───────────────────────────────────────────────── */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-pill: 999px;

  /* ── Ombres (chaudes) ─────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,162,74,0.04) inset;
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,162,74,0.06) inset;
  --shadow-glow-gold:     0 0 0 1px var(--gold) inset, 0 8px 28px var(--gold-glow);
  --shadow-glow-amethyst: 0 0 0 1px var(--amethyst-soft) inset, 0 8px 28px var(--amethyst-glow);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emboss: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  120ms;
  --t-mid:   220ms;
  --t-slow:  380ms;
}

/* ═══════════════════════════════════════════════════════════════
   Reset minimal + base
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-bg);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Texture parchemin subtile sur le fond global */
body {
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(201,162,74,0.06), transparent 50%),
    radial-gradient(ellipse at 90% 110%, rgba(168,136,212,0.05), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.50  0 0 0 0 0.30  0 0 0 0.05 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

::selection { background: var(--amethyst-deep); color: var(--parchment); }

/* Scrollbar dorée */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-bg); }
::-webkit-scrollbar-thumb {
  background: var(--ink-rule-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }