/* fcc-tokens.css — Canonical design tokens for the fcc.cc ecosystem
 *
 * Load AFTER fcc-theme-boot.js (which sets --bg, --text, etc. on :root)
 * so that themed values override defaults here.
 *
 * Breakpoints (can't be CSS vars, documented here):
 *   --bp-sm:  560px   (compact phones)
 *   --bp-md:  768px   (tablets / large phones)
 *   --bp-lg:  1024px  (small desktops)
 *   --bp-xl:  1280px  (wide desktops)
 */

:root {
  /* ── Core palette ────────────────────────────────────────────────────────── */
  --bg:         #0c0d0f;
  --panel:      #111214;
  --panel-2:    #15171a;
  --text:       #f5f6f7;
  --text-dim:   #9aa3b2;
  --accent:     #c7d2fe;
  --accent-2:   #e0e7ff;
  --border:     #2a2a2a;
  --line:       #1e1e1e;

  /* ── Semantic colors ─────────────────────────────────────────────────────── */
  --success:    #4ade80;
  --warning:    #fbbf24;
  --danger:     #f87171;
  --info:       #818cf8;

  /* ── Button defaults ─────────────────────────────────────────────────────── */
  --btn-bg:     #e5e7eb;
  --btn-bg-hover:#f3f4f6;
  --btn-text:   #111214;
  --btn-border: #2a2a2a;

  /* ── Aliases (backward compat + per-site naming) ─────────────────────────── */
  --ink:         var(--text);
  --muted:       var(--text-dim);
  --dim:         var(--text-dim);
  --panel2:      var(--panel-2);
  --panel-soft:  rgba(255, 255, 255, 0.04);
  --accent2:     var(--accent-2);

  /* ── Penny Press / Site Network design tokens ────────────────────────────
     These are the canonical names used by fcc-unified-topbar.css,
     fcc-site-rail.css, fcc-archetypes.css, fcc-sections.css.
     They alias to the existing --bg / --text tokens so legacy CSS that
     reads --bg / --text keeps working; theme-boot overrides them
     per-preset to the design's exact hex values. */
  --paper:       var(--bg);
  --paper-2:     var(--panel);
  --paper-3:     var(--panel-2);
  --ink-2:       var(--text-dim);
  --ink-3:       #8a8276;
  --ink-4:       #5a564e;
  --rule:        var(--border);
  --rule-2:      color-mix(in srgb, var(--border) 70%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ink:  var(--bg);
  --whisker-w:   56px;
  --whisker-h:   3px;
  --maxw:        1280px;
  --gutter:      32px;

  /* ── Transparency layers (for overlays / glassmorphism) ──────────────────── */
  --overlay-light: rgba(255, 255, 255, 0.04);
  --overlay-med:   rgba(255, 255, 255, 0.08);
  --overlay-heavy: rgba(0, 0, 0, 0.5);

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --sans:  Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --mono:  'Lilex', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Type scale (major-third ~1.25) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */

  --leading-tight:  1.25;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  /* ── Spacing scale ───────────────────────────────────────────────────────── */
  --sp-1:   0.25rem;   /* 4px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */

  /* ── Borders & Radius ────────────────────────────────────────────────────── */
  --radius-sm:  0.25rem;
  --radius:     0.35rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow:      0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 22px 58px rgba(0, 0, 0, 0.36);

  /* ── Z-index scale ───────────────────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    500;
  --z-overlay:   1000;
  --z-modal:     5000;
  --z-topbar:    9000;
  --z-fab:       9700;
  --z-toast:     9800;

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.1s;
  --duration-normal: 0.15s;
  --duration-slow:   0.3s;

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container:     1100px;
  --container-lg:  1280px;
  --container-xl:  1440px;
  --topbar-h:      56px;
}

/* ── Light-paper overrides ──────────────────────────────────────────────────
   When newsprint or paper is active, applyPresetToRoot (in fcc-econav.js)
   writes light values for --bg / --text / --panel / --border. That flips
   the BASE layer, but a lot of site chrome still leans on tokens that
   default to dark-mode values (--text-dim = light gray, --overlay-* =
   white rgbas, --panel-soft = white wash, --shadow-* = heavy black).
   Those values get washed out on a cream or white page. Flip them here
   via the `data-mode` attribute so every page restyles, not just Commons. */
html[data-mode="light"] {
  --text-dim:     #5a6370;
  --muted:        #5a6370;
  --dim:          #5a6370;
  --ink:          var(--text);

  /* Panels/cards — slightly darker than bg so cards retain structure on
     near-white pages. applyPresetToRoot sets --panel too; this is a
     stronger default for anything that reads --panel-soft/overlay-*. */
  --panel-soft:   rgba(0, 0, 0, 0.04);
  --overlay-light: rgba(0, 0, 0, 0.04);
  --overlay-med:   rgba(0, 0, 0, 0.08);
  --overlay-heavy: rgba(0, 0, 0, 0.45);

  /* Accent on light mode — the saturated editorial red (from the
     Commons design's PAPERS table for light papers). */
  --accent:       oklch(0.48 0.18 27);
  --accent-2:     oklch(0.55 0.16 27);
  --accent2:      oklch(0.55 0.16 27);

  /* Buttons — dark fill on a dark page inverts to a light fill on a
     light page. Keep text dark for legibility on the button face. */
  --btn-bg:       rgba(0, 0, 0, 0.06);
  --btn-bg-hover: rgba(0, 0, 0, 0.10);
  --btn-text:     #1a1a1a;
  --btn-border:   rgba(0, 0, 0, 0.18);

  /* Shadows — softer on light mode; pure black at full opacity looks
     harsh against cream/white. */
  --shadow-sm:    0 1px 3px  rgba(0, 0, 0, 0.08);
  --shadow:       0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 22px 58px rgba(0, 0, 0, 0.14);

  /* Penny Press tokens — light versions. Theme-boot may also write
     these per-preset; these are the safe defaults if it doesn't. */
  --ink-3:        #6a655c;
  --ink-4:        #9a9388;
  --rule-2:       color-mix(in srgb, var(--border) 70%, transparent);
  --accent-ink:   var(--bg);
}