/* ============================================================
   COPROLAB — DESIGN TOKENS
   v2 · Mai 2026
   Charte : IBM Plex Sans/Serif/Mono · Slate + Sky · Sober editorial
   ============================================================ */

:root {

  /* ─────────────────────────────────────────────
     1. PRIMITIVES — COLORS
     ───────────────────────────────────────────── */

  /* Slate (primary neutrals) */
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --color-slate-950: #020617;

  /* Sky (accent) */
  --color-sky-50:  #F0F9FF;
  --color-sky-100: #E0F2FE;
  --color-sky-200: #BAE6FD;
  --color-sky-300: #7DD3FC;
  --color-sky-400: #38BDF8;
  --color-sky-500: #0EA5E9;
  --color-sky-600: #0284C7;
  --color-sky-700: #0369A1;
  --color-sky-800: #075985;
  --color-sky-900: #0C4A6E;

  /* Absolutes */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Semantic primitives */
  --color-success: #059669; /* emerald-600 */
  --color-warning: #F59E0B; /* amber-500  */
  --color-error:   #DC2626; /* red-600    */


  /* ─────────────────────────────────────────────
     2. SEMANTIC TOKENS — LIGHT MODE (default)
     ───────────────────────────────────────────── */

  /* Surfaces */
  --color-bg-primary:   var(--color-white);
  --color-bg-secondary: var(--color-slate-50);
  --color-bg-tertiary:  var(--color-slate-100);
  --color-bg-inverse:   var(--color-slate-900);

  /* Text */
  --color-text-primary:   var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-text-tertiary:  var(--color-slate-400);
  --color-text-inverse:   var(--color-white);
  --color-text-muted:     var(--color-slate-600);

  /* Borders */
  --color-border:        var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);
  --color-border-subtle: var(--color-slate-100);

  /* Accent */
  --color-accent:        var(--color-sky-500);
  --color-accent-hover:  var(--color-sky-600);
  --color-accent-soft:   var(--color-sky-50);
  --color-accent-border: var(--color-sky-100);

  /* Link */
  --color-link:         var(--color-sky-600);
  --color-link-hover:   var(--color-sky-700);
  --color-link-visited: var(--color-sky-700);

  /* Status */
  --color-status-success: var(--color-success);
  --color-status-warning: var(--color-warning);
  --color-status-error:   var(--color-error);


  /* ─────────────────────────────────────────────
     3. TYPOGRAPHY — FAMILIES
     ───────────────────────────────────────────── */

  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;


  /* ─────────────────────────────────────────────
     4. TYPOGRAPHY — SIZE / LH / TRACKING
     ───────────────────────────────────────────── */

  /* Sizes */
  --font-size-h1:        48px;
  --font-size-h2:        32px;
  --font-size-h3:        24px;
  --font-size-h4:        20px;
  --font-size-body-lg:   18px;
  --font-size-body:      17px;
  --font-size-small:     14px;
  --font-size-caption:   12px;
  --font-size-mono:      14px;
  --font-size-pullquote: 22px;

  /* Line-heights */
  --line-height-h1:        1.1;
  --line-height-h2:        1.2;
  --line-height-h3:        1.3;
  --line-height-h4:        1.4;
  --line-height-body-lg:   1.7;
  --line-height-body:      1.7;
  --line-height-small:     1.5;
  --line-height-caption:   1.4;
  --line-height-pullquote: 1.45;
  --line-height-tight:     1.1;
  --line-height-snug:      1.3;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.7;

  /* Letter-spacing */
  --letter-spacing-h1:      -0.02em;
  --letter-spacing-h2:      -0.01em;
  --letter-spacing-h3:       0em;
  --letter-spacing-h4:       0em;
  --letter-spacing-body:     0em;
  --letter-spacing-caption:  0.08em;
  --letter-spacing-mono:     0.04em;

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;


  /* ─────────────────────────────────────────────
     5. SPACING (échelle 4-base)
     ───────────────────────────────────────────── */

  --space-0:    0;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  --space-6xl: 120px;

  /* Aliases editorial */
  --space-section:    var(--space-5xl);  /* 96px — entre sections majeures */
  --space-block:      var(--space-3xl);  /* 64px — entre blocs d'une section */
  --space-component:  var(--space-xl);   /* 32px — entre composants  */
  --space-tight:      var(--space-sm);   /* 8px  — relations serrées */


  /* ─────────────────────────────────────────────
     6. BORDER RADIUS
     ───────────────────────────────────────────── */

  --radius-none: 0;
  --radius-sm:   4px;   /* boutons, pills, inputs       */
  --radius-md:   6px;   /* cards article                 */
  --radius-lg:   8px;   /* surfaces étendues (max)       */
  --radius-pill: 999px; /* exception : URL bar, badges   */


  /* ─────────────────────────────────────────────
     7. BORDERS
     ───────────────────────────────────────────── */

  --border-width-thin:    1px;
  --border-width-medium:  2px;
  --border-width-accent:  3px; /* pull-quote left rule */

  --border-style: solid;


  /* ─────────────────────────────────────────────
     8. SHADOWS (volontairement minimales)
     ───────────────────────────────────────────── */

  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 2px 8px rgba(15, 23, 42, 0.06);
  /* shadow-lg+ interdits — voir charte §1.4 */


  /* ─────────────────────────────────────────────
     9. LAYOUT
     ───────────────────────────────────────────── */

  --max-width-prose:     720px;  /* corps d'article — reading width */
  --max-width-narrow:    640px;  /* leads, intros                   */
  --max-width-container: 1200px; /* containers principaux           */
  --max-width-wide:      1320px; /* containers avec sidenav         */

  --reading-width:       720px;  /* alias historique                */

  /* Breakpoints (à utiliser via JS ou @custom-media — référence) */
  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-desktop: 1100px;
  --bp-wide:    1320px;


  /* ─────────────────────────────────────────────
     10. MOTION
     ───────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s  ease;
  --transition-slow: 0.3s  ease;


  /* ─────────────────────────────────────────────
     11. Z-INDEX
     ───────────────────────────────────────────── */

  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}


/* ============================================================
   DARK MODE
   Activation : [data-theme="dark"] OU @media prefers-color-scheme
   ============================================================ */

[data-theme="dark"] {
  --color-bg-primary:   var(--color-slate-950);
  --color-bg-secondary: var(--color-slate-900);
  --color-bg-tertiary:  var(--color-slate-800);
  --color-bg-inverse:   var(--color-slate-100);

  --color-text-primary:   var(--color-slate-100);
  --color-text-secondary: var(--color-slate-400);
  --color-text-tertiary:  var(--color-slate-500);
  --color-text-inverse:   var(--color-slate-900);
  --color-text-muted:     var(--color-slate-300);

  --color-border:        var(--color-slate-800);
  --color-border-strong: var(--color-slate-700);
  --color-border-subtle: var(--color-slate-900);

  --color-accent:        var(--color-sky-400);
  --color-accent-hover:  var(--color-sky-300);
  --color-accent-soft:   rgba(56, 189, 248, 0.12);
  --color-accent-border: rgba(56, 189, 248, 0.24);

  --color-link:         var(--color-sky-400);
  --color-link-hover:   var(--color-sky-300);
  --color-link-visited: var(--color-sky-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:   var(--color-slate-950);
    --color-bg-secondary: var(--color-slate-900);
    --color-bg-tertiary:  var(--color-slate-800);
    --color-bg-inverse:   var(--color-slate-100);

    --color-text-primary:   var(--color-slate-100);
    --color-text-secondary: var(--color-slate-400);
    --color-text-tertiary:  var(--color-slate-500);
    --color-text-inverse:   var(--color-slate-900);
    --color-text-muted:     var(--color-slate-300);

    --color-border:        var(--color-slate-800);
    --color-border-strong: var(--color-slate-700);
    --color-border-subtle: var(--color-slate-900);

    --color-accent:        var(--color-sky-400);
    --color-accent-hover:  var(--color-sky-300);
    --color-accent-soft:   rgba(56, 189, 248, 0.12);
    --color-accent-border: rgba(56, 189, 248, 0.24);

    --color-link:         var(--color-sky-400);
    --color-link-hover:   var(--color-sky-300);
    --color-link-visited: var(--color-sky-300);
  }
}