/* fcc.cc/library — design tokens
 *
 * Source: redesign Engineering Brief §9 (handoff.jsx, 2026-05-01).
 * Three theme blocks: :root (light, default), [data-theme="dark"],
 * [data-theme="sepia"] (proposal, behind feature flag).
 *
 * Loaded BEFORE styles.css so existing rules can reference the new
 * --color-*, --font-*, --space-*, --radius-*, --shadow-*, --reader-*,
 * --motion-* tokens. styles.css aliases its legacy --bg/--text/etc.
 * to these tokens for the visual refresh.
 *
 * Sizes / spacing / radii / motion are theme-invariant and live only
 * in :root. Theme-variant tokens (color, shadow, reader fills) are
 * redefined in [data-theme="…"] selectors below.
 *
 * `prefers-reduced-motion: reduce` zeros the --motion-* durations.
 */

:root {
  /* ── Color · Semantic (light) ──
   * Values lifted verbatim from browse.jsx#BrowseApp C (light branch).
   * Engineering brief §9 had slightly different (cooler/lighter) values
   * that we initially used; switched to the canvas's inline-mock values
   * 2026-05-02 to match the design spec exactly. */
  --color-accent:           #a83a4a;             /* Brand accent — links, drop caps, active states */
  --color-page-bg:          #fdfbf6;             /* Reader page background — reader.jsx-specific, slightly cooler */
  --color-app-bg:           #f6f1e7;             /* App chrome background — canvas C.bg */
  --color-surface:          #fbf8f1;             /* Card / panel / sidebar — canvas C.surface */
  --color-surface-raised:   #ffffff;             /* Popover / dropdown / tweak panel */
  --color-text:             #1f1b14;             /* Body text — canvas C.text */
  --color-text-dim:         rgba(31, 27, 20, .65); /* Secondary text — canvas C.dim */
  --color-text-faint:       rgba(31, 27, 20, .40); /* Disabled / placeholder — canvas C.faint */
  --color-border:           rgba(0, 0, 0, .07);  /* canvas C.border */
  --color-border-strong:    rgba(0, 0, 0, .16);  /* Inputs, focused */

  /* ── Color · Status (light) ── */
  --color-ok:               #2f7a4a;             /* Success */
  --color-warn:             #a86a1a;             /* Caution */
  --color-danger:           #a83a4a;             /* Errors */
  --color-info:             #1a6a8a;             /* Informational */

  /* ── Typography · Families ──
   * Note: redesign brief calls for EB Garamond on the reader body, but the
   * fcc.cc CSP is `font-src 'self'` — Google Fonts is blocked. EB Garamond
   * isn't self-hosted; Source Serif 4 IS (and is optimized for screen
   * reading), so it leads the --font-reader stack. Cormorant Garamond is
   * self-hosted and used verbatim for display headings.
   */
  --font-display:           "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-reader:            "Source Serif 4", "EB Garamond", Georgia, serif;
  --font-ui:                "Inter", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:              "Lilex", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Typography · Scale (px) ── */
  --font-size-xs:           11px;                /* Captions, eyebrows, kbd */
  --font-size-sm:           12px;                /* Secondary UI labels */
  --font-size-md:           13.5px;              /* Default UI body */
  --font-size-lg:           16px;                /* Reader body baseline (user-overridden) */
  --font-size-xl:           20px;                /* Card titles, popover titles */
  --font-size-2xl:          26px;                /* Section headings display */
  --font-size-3xl:          38px;                /* Page titles */

  /* Reader page widths */
  --reader-measure-narrow:  640px;
  --reader-measure-wide:    760px;
  --reader-measure-full:    100%;

  /* ── Spacing (4px scale) ── */
  --space-1:                4px;                 /* Inline gap — icon ↔ label */
  --space-2:                8px;                 /* Tight stack — form rows */
  --space-3:                12px;                /* Default cell padding */
  --space-4:                16px;                /* Card inner padding */
  --space-5:                20px;                /* Card-to-card vertical */
  --space-6:                24px;                /* Section padding */
  --space-8:                36px;                /* Section-to-section vertical */
  --space-10:               56px;                /* Page padding desktop */

  /* ── Radius ── */
  --radius-sm:              3px;                 /* Inline tags, kbd, code */
  --radius-md:              6px;                 /* Buttons, inputs */
  --radius-lg:              10px;                /* Cards, panels */
  --radius-xl:              14px;                /* Hero / book-of-the-day cards */
  --radius-pill:            999px;               /* Pills, chips */

  /* ── Elevation (light) ── */
  --shadow-sm:              0 1px 0 rgba(0, 0, 0, .06);                /* Kbd, separators */
  --shadow-md:              0 4px 12px rgba(0, 0, 0, .08);             /* Popovers, dropdowns */
  --shadow-lg:              0 12px 40px rgba(0, 0, 0, .12);            /* Modals, focus overlay */

  /* ── Reader-Specific (light) ── */
  --reader-line-height:     1.6;                                       /* Default; user-overridden */
  --reader-paragraph-gap:   0;                                         /* Indented prose; .8em when justify off */
  --reader-indent:          1.6em;                                     /* First-line indent */
  --align-band-fill:        rgba(168, 58, 74, .12);                    /* Active-sentence highlighter band (accent at 1F = 12%) */
  --align-word-fill:        rgba(168, 58, 74, .33);                    /* Active-word highlight (accent at 55 = 33%) */
  --align-word-unverified:  rgba(168, 58, 74, .10);                    /* Low-confidence alignment */
  --margin-note-tone:       rgba(26, 24, 18, .55);                     /* Tufte-style margin text */

  /* ── Motion ── */
  --motion-fast:            120ms;                                     /* Hover, button press */
  --motion-base:            200ms;                                     /* Default transitions */
  --motion-slow:            320ms;                                     /* Panel slide, sidebar toggle */
  --motion-easing:          cubic-bezier(.2, .8, .2, 1);
}

/* ── Dark theme ──
 * Values lifted verbatim from browse.jsx#BrowseApp C (dark branch).
 * Note: reader.jsx#ReaderApp uses a slightly dimmer text (#ddd5c2) for
 * reading comfort; we use the brighter browse value for chrome here
 * and let the reader page apply its own override if needed.
 *
 * Selector triple: the FCC site-wide theme system (fcc-theme-boot.js)
 * sets data-mode="dark" + class .fcc-v2-dark on <html> when the user
 * picks one of the dark presets — NOT data-theme. We match all three
 * so library tokens activate whether the user toggles theme via the
 * library reader prefs (data-theme) or the FCC topbar theme picker
 * (data-mode / class). Without this, the library kept rendering in
 * light tokens while the FCC chrome went dark — mixed rendering. */
[data-theme="dark"],
[data-mode="dark"],
:root.fcc-v2-dark {
  --color-accent:           #d8a878;
  --color-page-bg:          #13110d;             /* canvas C.bg */
  --color-app-bg:           #13110d;             /* canvas uses one bg, not two */
  --color-surface:          #1c1916;             /* canvas C.surface */
  --color-surface-raised:   #22201c;
  --color-text:             #ece6d8;             /* canvas C.text — brighter than the previous #ddd5c2 */
  --color-text-dim:         rgba(236, 230, 216, .60);  /* canvas C.dim */
  --color-text-faint:       rgba(236, 230, 216, .40);  /* canvas C.faint */
  --color-border:           rgba(255, 255, 255, .08);  /* canvas C.border */
  --color-border-strong:    rgba(255, 255, 255, .16);

  --color-ok:               #5cb37c;
  --color-warn:             #d99a4a;
  --color-danger:           #d96a7a;
  --color-info:             #5aa5c5;

  --shadow-sm:              none;
  --shadow-md:              0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg:              0 12px 40px rgba(0, 0, 0, .55);

  --align-band-fill:        rgba(216, 168, 120, .10);
  --align-word-fill:        rgba(216, 168, 120, .30);
  --align-word-unverified:  rgba(216, 168, 120, .14);
  --margin-note-tone:       rgba(221, 213, 194, .55);
}

/* ── Sepia theme (proposal — behind feature flag, default off) ── */
[data-theme="sepia"] {
  --color-accent:           #a83a4a;
  --color-page-bg:          #f4ebd9;
  --color-app-bg:           #efe4cd;
  --color-surface:          #ede0c5;
  --color-surface-raised:   #f6efde;
  --color-text:             #2b2419;
  --color-text-dim:         rgba(43, 36, 25, .55);
  --color-text-faint:       rgba(43, 36, 25, .30);
  --color-border:           rgba(0, 0, 0, .10);
  --color-border-strong:    rgba(0, 0, 0, .18);

  --color-ok:               #2f7a4a;
  --color-warn:             #a86a1a;
  --color-danger:           #a83a4a;
  --color-info:             #1a6a8a;

  --shadow-sm:              0 1px 0 rgba(0, 0, 0, .08);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg:              0 12px 40px rgba(0, 0, 0, .14);

  --align-band-fill:        rgba(168, 58, 74, .10);
  --align-word-fill:        rgba(168, 58, 74, .24);
  --align-word-unverified:  rgba(168, 58, 74, .12);
  --margin-note-tone:       rgba(43, 36, 25, .55);
}

/* ── Reduced motion: zero out durations ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}