/* ============================================================
   DESIGN TOKENS — 3 niveaux : primitif → sémantique → composant
   ============================================================ */

:root,
[data-theme="light"] {
  /* ── Primitifs ── */
  --color-ink-900:  #16110E;
  --color-ink-600:  rgba(22,17,14,.62);
  --color-ink-400:  rgba(22,17,14,.38);
  --color-ink-100:  rgba(22,17,14,.10);
  --color-paper:    #F6F1E7;
  --color-red-600:  #E32219;
  --color-white:    #ffffff;

  /* ── Sémantiques ── */
  --color-text:          var(--color-ink-900);
  --color-text-muted:    var(--color-ink-400);
  --color-text-medium:   var(--color-ink-600);
  --color-bg:            var(--color-paper);
  --color-accent:        var(--color-red-600);
  --color-line:          var(--color-ink-100);
  --color-surface:       var(--color-white);
  --color-paper-alt:     rgba(22,17,14,.04);

  /* ── Typographie ── */
  --font-base:    "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --font-display: "Futura", "Century Gothic", "Trebuchet MS", sans-serif;

  /* Tailles */
  --text-xs:   0.6rem;
  --text-sm:   0.75rem;
  --text-base: 1rem;
  --text-md:   1.05rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.4rem, 3vw, 2.1rem);
  --text-3xl:  clamp(2rem, 5vw, 3.5rem);

  /* Graisses */
  --fw-light:  300;
  --fw-book:   400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-heavy:  800;

  /* ── Layout ── */
  --sidebar-w:     200px;
  --article-col:   680px;
  --bottom-nav-h:  56px;
  --topbar-h:      44px;

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

  /* ── Bordures & Rayons ── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Transitions ── */
  --ease-fast: 140ms ease;
  --ease-base: 220ms ease;

  /* ── Composants ── */
  --article-accent:        var(--color-accent);
  --nav-active-indicator:  var(--color-accent);
  --card-border:           var(--color-line);
  --chip-border:           var(--color-line);
  --label-color:           var(--color-accent);
  --progress-bar-color:    var(--color-accent);
  --live-badge-bg:         var(--color-accent);
}

/* ── Mode sombre ── */
[data-theme="dark"] {
  --color-ink-900:  #EDE8DF;
  --color-ink-600:  rgba(237,232,223,.65);
  --color-ink-400:  rgba(237,232,223,.42);
  --color-ink-100:  rgba(237,232,223,.10);
  --color-paper:    #1C1714;
  --color-white:    #231E1A;
  --color-paper-alt: rgba(237,232,223,.06);

  --color-text:          var(--color-ink-900);
  --color-text-muted:    var(--color-ink-400);
  --color-text-medium:   var(--color-ink-600);
  --color-bg:            var(--color-paper);
  --color-line:          var(--color-ink-100);
  --color-surface:       var(--color-white);

  color-scheme: dark;
}