/* ============================================================================
   tokens.css — Xteem design tokens (v2 redesign)
   Source of truth: _overhaul/redesign_ui.md §3.2
   Light is the default theme (read-heavy knowledge work); dark is first-class
   via prefers-color-scheme + a manual [data-theme] toggle persisted in JS.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ----- Brand ----- */
  --neko-1: #6d5efc;          /* violet */
  --neko-2: #22b8cf;          /* cyan */
  --brand-gradient: linear-gradient(135deg, var(--neko-1), var(--neko-2));

  /* ----- Accent (single action color) ----- */
  --accent:        #6366f1;
  --accent-hover:  #5457e6;
  --accent-active: #4044cc;
  --accent-soft:   #ececfd;   /* tinted bg for selected/hover, light */
  --accent-ring:   rgba(99,102,241,.45);

  /* ----- Semantic ----- */
  --success: #16a34a;  --success-soft: #e7f6ec;
  --warning: #d97706;  --warning-soft: #fbf0e0;
  --danger:  #dc2626;  --danger-soft:  #fbeaea;
  --info:    #2563eb;  --info-soft:    #e8eefb;

  /* ----- Light surfaces & text ----- */
  --bg:        #fbfbfd;       /* app background */
  --surface:   #ffffff;       /* cards, panels */
  --surface-2: #f4f4f7;       /* subtle wells, hover */
  --surface-3: #ebebf0;
  --border:    #e4e4ea;
  --border-strong: #d2d2db;
  --text:      #1a1a22;       /* AA on --surface */
  --text-2:    #545465;       /* secondary, AA on bg */
  --text-3:    #74748a;       /* tertiary — min size 12px */
  --text-on-accent: #ffffff;

  /* ----- Type ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* Fontes « exsel » promues au global pour homogénéiser tout le site :
     serif pour les grands titres/glyphes, Manrope pour les libellés vivants. */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-display: 'Manrope', var(--font-sans);
  /* scale (1.20 minor-third), rem-based */
  --fs-xs: .75rem;   /* 12 */
  --fs-sm: .8125rem; /* 13 */
  --fs-md: .875rem;  /* 14  body default */
  --fs-lg: 1rem;     /* 16 */
  --fs-xl: 1.25rem;  /* 20 */
  --fs-2xl: 1.5rem;  /* 24 */
  --fs-3xl: 2rem;    /* 32  stat numerals */
  --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ----- Spacing (4px base) ----- */
  --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;

  /* ----- Radii ----- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* ----- Elevation (soft, neutral — no neon glow) ----- */
  --shadow-xs: 0 1px 2px rgba(16,18,32,.06);
  --shadow-sm: 0 1px 3px rgba(16,18,32,.08), 0 1px 2px rgba(16,18,32,.06);
  --shadow-md: 0 4px 12px rgba(16,18,32,.08), 0 2px 4px rgba(16,18,32,.05);
  --shadow-lg: 0 12px 32px rgba(16,18,32,.14), 0 4px 8px rgba(16,18,32,.06);
  --ring: 0 0 0 3px var(--accent-ring);   /* focus-visible */

  /* ----- Difficulté (barre de répartition + slider) -----
     Progression vert → orange → rouge-violet, lisible en clair ET en sombre
     (couleurs vives à fort contraste sur les deux fonds). */
  --diff-1: #34c759;   /* niveau 1 — facile / incontournable */
  --diff-2: #ff9f0a;   /* niveau 2 — moyen / travail de fond */
  --diff-3: #ff375f;   /* niveau 3 — difficile / pour aller plus loin */

  /* ----- Motion ----- */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms;
  --t: var(--dur) var(--ease);

  /* ----- Layout ----- */
  --rail-w: 232px;
  --rail-w-collapsed: 64px;
  --topbar-h: 56px;
}

/* ----- Dark theme — shared declarations ------------------------------------
   Factored into a mixin-like rule applied both to (a) OS dark preference when
   the user hasn't forced light, and (b) the manual [data-theme="dark"] flag. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0c0d12;
    --surface:   #15161d;
    --surface-2: #1d1e27;
    --surface-3: #262833;
    --border:    #282a36;
    --border-strong: #363846;
    --text:      #ecedf3;     /* AA on surface */
    --text-2:    #a6a8b8;
    --text-3:    #7b7d90;     /* keep ≥12px */
    --accent-soft: #1d1e3a;
    --success-soft: #11261a; --warning-soft: #2a2010;
    --danger-soft:  #2a1416; --info-soft:    #131f38;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
    --shadow-md: 0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  }
}

/* Manual override: forcing dark regardless of OS preference. Mirrors the block
   above so the toggle works on light-OS machines too. */
:root[data-theme="dark"] {
  --bg:        #0c0d12;
  --surface:   #15161d;
  --surface-2: #1d1e27;
  --surface-3: #262833;
  --border:    #282a36;
  --border-strong: #363846;
  --text:      #ecedf3;
  --text-2:    #a6a8b8;
  --text-3:    #7b7d90;
  --accent-soft: #1d1e3a;
  --success-soft: #11261a; --warning-soft: #2a2010;
  --danger-soft:  #2a1416; --info-soft:    #131f38;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}
/* [data-theme="light"] simply uses the :root defaults — nothing to override. */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:1ms; --dur:1ms; --dur-slow:1ms; }
  *,*::before,*::after {
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
  }
}