/* public/css/variables.css
   Identité « Studio Z » (Nº 01). Source de vérité visuelle.
   Tokens natifs + couche de compatibilité vers l'ancien nommage. */

/* ============================================================
   POLICES AUTO-HÉBERGÉES
   Placer les WOFF2 dans /static/fonts/ (voir note de livraison).
   ============================================================ */
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-VariableFont.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-Italic-VariableFont.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ── Familles (§ 2) ── */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-text:    "Newsreader", "Source Serif 4", Georgia, serif;
  --font-ui:      "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ── Échelle typographique éditoriale (§ 2) ── */
  --t-mark:      11px;
  --t-meta:      12px;
  --t-ui-sm:     13px;
  --t-ui:        14px;
  --t-summary:   15px;
  --t-card-ttl:  22px;
  --t-card-lg:   28px;
  --t-section:   13px;
  --t-read-ttl:  44px;
  --t-read-body: 19px;
  --t-display:   88px;

  /* ── Rythme 8px (§ 2) ── */
  --gut-hair:  1px;
  --gut-1:     4px;
  --gut-2:     8px;
  --gut-3:    12px;
  --gut-4:    16px;
  --gut-5:    24px;
  --gut-6:    32px;
  --gut-7:    48px;
  --gut-8:    64px;
  --gut-9:    96px;

  /* ── Colonnes ── */
  --col-read:    640px;
  --col-narrow:  320px;
  --col-sidebar: 248px;

  /* ── Mouvement ── */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  140ms;
}

/* ── LIGHT — « Paper » — défaut ─────────────────────────────── */
:root,
[data-theme="light"] {
  --paper:       #F6F1E7;
  --paper-sub:   #EDE5D4;
  --paper-deep:  #E4D9C2;
  --ink:         #1A1612;
  --ink-2:       #3D352C;
  --ink-3:       #6A5F52;
  --ink-4:       #9C8E7C;
  --rule:        #C9B998;
  --rule-soft:   #DECDA9;
  --accent:      #B8763A;
  --accent-deep: #8E5621;
  --accent-soft: #E3C794;
  --unread-dot:  #B8763A;
  --highlight:   #F0D89B;
  --selection:   #E3C794;
  color-scheme: light;
}

/* ── DARK — « Press » — OLED ────────────────────────────────── */
[data-theme="dark"] {
  --paper:       #000000;
  --paper-sub:   #0B0907;
  --paper-deep:  #14110D;
  --ink:         #E8DDC9;
  --ink-2:       #C9BEAA;
  --ink-3:       #8A7E6A;
  --ink-4:       #5C5345;
  --rule:        #3A3328;
  --rule-soft:   #221E18;
  --accent:      #E0A055;
  --accent-deep: #C77F2A;
  --accent-soft: #6B4A1F;
  --unread-dot:  #E0A055;
  --highlight:   #2A1F0F;
  --selection:   #4D3A1A;
  color-scheme: dark;
}

/* ── SEPIA — « Almanac » ────────────────────────────────────── */
[data-theme="sepia"] {
  --paper:       #F1E4CB;
  --paper-sub:   #E8D9B9;
  --paper-deep:  #DECCA5;
  --ink:         #3B2A1C;
  --ink-2:       #574028;
  --ink-3:       #856749;
  --ink-4:       #B49775;
  --rule:        #C7A77A;
  --rule-soft:   #D6BC95;
  --accent:      #C95F3A;
  --accent-deep: #9B3F1E;
  --accent-soft: #E4A37F;
  --unread-dot:  #C95F3A;
  --highlight:   #EAD3A2;
  --selection:   #E4A37F;
  color-scheme: light;
}

/* ============================================================
   COUCHE DE COMPATIBILITÉ
   Mappe l'ancien nommage vers les tokens Studio Z, le temps de
   migrer chaque composant. À retirer quand plus aucun composant
   n'utilise ces alias.
   ============================================================ */
:root {
  /* Surfaces : le brief refuse les surfaces élevées → tout = paper */
  --bg:            var(--paper);
  --bg-elevated:   var(--paper);
  --bg-sunken:     var(--paper-sub);
  --bg-hover:      var(--paper-sub);

  /* Texte */
  --text:           var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);

  /* Filets (jamais gris) */
  --border:         var(--rule);
  --border-strong:  var(--rule);

  /* Ombres bannies, géométrie rectangulaire */
  --shadow:    none;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Polices : éditorial → Newsreader, UI → Plex Sans */
  --font-sans:    var(--font-ui);
  --font-serif:   var(--font-text);
  --font-reading: var(--font-text);

  /* Échelle ancienne → rem cohérents */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  --leading-tight:   1.12;
  --leading-normal:  1.5;
  --leading-relaxed: 1.62;

  --measure: var(--col-read);

  /* Espacements anciens → grille 8px */
  --space-1: var(--gut-1);
  --space-2: var(--gut-2);
  --space-3: var(--gut-3);
  --space-4: var(--gut-4);
  --space-6: var(--gut-5);
  --space-8: var(--gut-6);
  --space-12: var(--gut-7);
  --space-16: var(--gut-8);

  --sidebar-width:   var(--col-sidebar);
  --header-height:   56px;
  --transition-fast: var(--dur) var(--ease);
  --transition:      var(--dur) var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper:       #000000;
    --paper-sub:   #0B0907;
    --paper-deep:  #14110D;
    --ink:         #E8DDC9;
    --ink-2:       #C9BEAA;
    --ink-3:       #8A7E6A;
    --ink-4:       #5C5345;
    --rule:        #3A3328;
    --rule-soft:   #221E18;
    --accent:      #E0A055;
    --accent-deep: #C77F2A;
    --accent-soft: #6B4A1F;
    --unread-dot:  #E0A055;
    --highlight:   #2A1F0F;
    --selection:   #4D3A1A;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --transition: 0ms; --transition-fast: 0ms; }
}

::selection { background: var(--selection); }