/* ═══════════════════════════════════════════════════════════════
   CLAUDE VERSE APP — Tokens de design v1.0
   Extension du Hatsu Codex pour l'app de formation
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── PALETTE CORE (héritage Hatsu Codex) ──────────────────── */
  --cv-ink-void:        #0A0A0F;
  --cv-parchment:       #F2EBDA;
  --cv-parchment-muted: #C8BFA8;
  --cv-ash-grey:        #3A3A45;
  --cv-ash-light:       #848490;
  --cv-aura-cyan:       #00E5FF;
  --cv-soul-gold:       #FFB020;
  --cv-cursed-violet:   #7C3AED;
  --cv-blood-crimson:   #E63946;

  /* ── PALETTE APP (extension RPG/Grimoire) ─────────────────── */
  --bg:               #08070F;   /* Fond principal app — plus profond */
  --surface-1:        #0F0D20;   /* Cards niveau 1 */
  --surface-2:        #171430;   /* Cards niveau 2 (élevé) */
  --surface-3:        #1F1B3A;   /* Cards niveau 3 (très élevé) */
  --surface-glass:    rgba(23, 20, 48, 0.8);

  --border-subtle:    rgba(124, 58, 237, 0.18);
  --border-default:   rgba(124, 58, 237, 0.30);
  --border-active:    rgba(0, 229, 255, 0.45);
  --border-gold:      rgba(255, 176, 32, 0.50);

  /* Accents */
  --gold:             #FFB020;
  --gold-bright:      #FFC840;
  --gold-dim:         #C87D10;
  --gold-glow:        rgba(255, 176, 32, 0.30);
  --cyan:             #00E5FF;
  --cyan-dim:         #0099B3;
  --cyan-glow:        rgba(0, 229, 255, 0.25);
  --purple:           #7C3AED;
  --purple-dim:       rgba(124, 58, 237, 0.20);
  --purple-glow:      rgba(124, 58, 237, 0.35);
  --crimson:          #E63946;
  --green-ok:         #10B981;

  /* ── RANGS (E → S) ────────────────────────────────────────── */
  --rang-e:           #5A5A70;   /* Néophyte — gris */
  --rang-d:           #4B89DC;   /* Initié — bleu */
  --rang-c:           #7C3AED;   /* Praticien — violet */
  --rang-b:           #00E5FF;   /* Forgeron — cyan */
  --rang-a:           #FFB020;   /* Archiviste — or */
  --rang-s:           #FFB020;   /* Monarque — or avec glow */
  --rang-s-2:         #FF9500;

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

  /* ── ÉCHELLE TYPOGRAPHIQUE ────────────────────────────────── */
  --text-3xl:     clamp(1.875rem, 6vw, 2.5rem);    /* Titres héros */
  --text-2xl:     clamp(1.5rem, 4.5vw, 2rem);      /* H1 sections */
  --text-xl:      clamp(1.25rem, 3.5vw, 1.5rem);   /* H2 */
  --text-lg:      1.125rem;                          /* Lead */
  --text-base:    1rem;                              /* Corps */
  --text-sm:      0.875rem;                          /* Small */
  --text-xs:      0.75rem;                           /* Caption */
  --text-2xs:     0.625rem;                          /* Micro / labels */

  /* Tracking mono obligatoire */
  --tracking-mono: 0.18em;
  --tracking-label: 0.12em;
  --tracking-display: 0.04em;

  /* ── SPACING ──────────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── LAYOUT APP ───────────────────────────────────────────── */
  --app-max-width:    430px;
  --status-bar-h:     44px;   /* iOS status bar simulation */
  --bottom-nav-h:     68px;
  --header-h:         56px;

  /* ── BORDER-RADIUS ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS / GLOWS ──────────────────────────────────────── */
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-gold:   0 0 24px rgba(255, 176, 32, 0.35);
  --shadow-glow-cyan:   0 0 20px rgba(0, 229, 255, 0.30);
  --shadow-glow-purple: 0 0 28px rgba(124, 58, 237, 0.40);

  /* ── TRANSITIONS ──────────────────────────────────────────── */
  --ease-quick:    120ms ease;
  --ease-base:     200ms ease;
  --ease-smooth:   320ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-card:    5;
  --z-overlay: 20;
  --z-nav:     50;
  --z-modal:   100;
}