/* ─────────────────────────────────────────────
   PerfDesk — Design Tokens
   Direction : Ardoise × Caldera
   Référence spec : docs/superpowers/specs/2026-04-04-identite-visuelle-design.md
   ───────────────────────────────────────────── */

:root {

  /* ── Couleurs ── */
  --cream:       #F7F4EF;   /* Background principal */
  --ink:         #111117;   /* Texte principal, headings */
  --indigo:      #6366F1;   /* CTA principal, liens, focus */
  --indigo-bg:   #EEF2FF;   /* Background tags indigo */
  --amber:       #F59E0B;   /* Accent graphique, badges */
  --amber-dark:  #B45309;   /* Texte sur fond --amber-bg · usage : badge niveau Amateur uniquement */
  --amber-bg:    #FEF3C7;   /* Background tags amber */
  --muted:       #6B7280;   /* Texte secondaire, labels */
  --border:      #E2DDD6;   /* Séparateurs, contours */
  --white:       #FFFFFF;   /* Surfaces de cards */

  /* ── Surface sombre (fond de la dark card secondaire) ── */
  --surface-dark-2:   #1A1C24;   /* dark card imbriquée — utiliser --ink pour la surface principale */

  /* ── Typographie ── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  /* Tailles */
  --text-xs:     10px;
  --text-sm:     12px;
  --text-base:   14px;
  --text-md:     16px;
  --text-lg:     20px;
  --text-xl:     28px;
  --text-2xl:    36px;
  --text-3xl:    48px;
  --text-4xl:    64px;

  /* Poids */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* ── Spacing ── */
  --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;

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(17, 17, 23, 0.06);
  --shadow-md:  0 4px 12px rgba(17, 17, 23, 0.08);
  --shadow-lg:  0 8px 32px rgba(17, 17, 23, 0.12);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --max-width:   1200px;
  --nav-height:  60px;
}