/* ═══════════════════════════════════════════════════════════════
   CLAUDE VERSE — Tokens de design (Hatsu Codex v1.0)
   Source : Charte graphique Claude Verse — Figma Foundations
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── PALETTE HATSU CODEX ─────────────────────────────────── */
  --cv-ink-void:        #0A0A0F;   /* 55% — Fond principal             */
  --cv-parchment:       #F2EBDA;   /* 20% — Texte principal            */
  --cv-parchment-muted: #D5CDB8;   /* Texte secondaire / captions      */
  --cv-ash-grey:        #3A3A45;   /* 12% — Lignes, bordures, surfaces */
  --cv-ash-light:       #848490;   /* Texte tertiaire / placeholders   */
  --cv-aura-cyan:       #00E5FF;   /* 8%  — Accent principal / CTA     */
  --cv-soul-gold:       #FFB020;   /* 3%  — Rang S / moments rares     */
  --cv-cursed-violet:   #7C3AED;   /* 1.5%— Skills avancés / pacte     */
  --cv-blood-crimson:   #E63946;   /* 0.5%— Erreurs / sémantique seul  */

  /* Surfaces légèrement élevées (sans glassmorphism) */
  --cv-surface:         #111118;
  --cv-surface-2:       #16161F;

  /* ── TYPOGRAPHIES ────────────────────────────────────────── */
  --cv-font-display: 'Cinzel', serif;
  --cv-font-body:    'Inter', sans-serif;
  --cv-font-mono:    'JetBrains Mono', monospace;

  /* ── ÉCHELLE TYPOGRAPHIQUE (mobile-first, base 16px) ─────── */
  --font-display-xl: clamp(2.5rem, 6.5vw, 5rem);     /* H1 hero      */
  --font-display-l:  clamp(1.875rem, 4.5vw, 3.5rem); /* Section H1   */
  --font-display-m:  clamp(1.5rem, 3vw, 2.25rem);    /* H2           */
  --font-display-s:  clamp(1.25rem, 2.5vw, 1.5rem);  /* H3           */
  --font-body-l:     1.25rem;    /* 20px — Lead paragraph             */
  --font-body:       1.0625rem;  /* 17px — Body default               */
  --font-body-s:     0.9375rem;  /* 15px — Body small                 */
  --font-caption:    0.875rem;   /* 14px — Captions / eyebrow labels  */
  --font-micro:      0.75rem;    /* 12px — Legal / footer             */

  /* ── TRACKING ────────────────────────────────────────────── */
  --tracking-display: 0.02em;
  --tracking-mono:    0.18em;    /* Obligatoire sur tous labels mono  */
  --tracking-brand:   0.4em;     /* Wordmark "CLAUDE VERSE"           */

  /* ── EFFETS / OMBRES ─────────────────────────────────────── */
  --cv-glow-cyan:          0 0 24px rgba(0, 229, 255, 0.25);
  --cv-glow-cyan-strong:   0 0 40px rgba(0, 229, 255, 0.50);
  --cv-glow-gold:          0 0 32px rgba(255, 176, 32, 0.30);

  /* ── BORDER-RADIUS (règle stricte : max 4px sauf cercles) ── */
  --cv-radius: 4px;

  /* ── BORDURES ────────────────────────────────────────────── */
  --cv-border-grey:  1px solid var(--cv-ash-grey);
  --cv-border-muted: 1px solid rgba(58, 58, 69, 0.5);
  --cv-border-cyan:  1px solid var(--cv-aura-cyan);

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 7rem;
  --space-3xl: 10rem;

  /* ── Z-INDEX (échelle stricte) ───────────────────────────── */
  --z-base:    10;
  --z-overlay: 20;
  --z-modal:   30;
  --z-nav:     50;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-fast:     150ms ease;
  --ease-standard: 200ms ease;
  --ease-medium:   300ms ease-in-out;
  --ease-slow:     600ms ease-in-out;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-width:    1200px;
  --nav-height:   72px;
}