/* ==========================================================================
   Tworks — Modern Platform Design System — Tokens
   ver 1.0 — see tworks-ui-document_ver1.0 for full rationale.

   Two token layers:
   1. Site chrome (header, catalog, detail, bookshelf) — one light theme.
   2. Reader (--reader-*) — four selectable palettes, scoped to
      [data-reader-theme] so they never leak into site chrome.
   ========================================================================== */

:root {
  /* ---- Brand ----
     #d93025, not the brighter #ff4b3e the palette started from: white-on-
     brand and brand-on-white both need to clear 4.5:1 for AA text (buttons,
     "see all" links, the eyebrow label), and #ff4b3e only reached ~3.3:1.
     See tworks-ui-document_ver1.0 §Accessibility for the full contrast
     table. --brand-bright keeps the punchier red for decorative/non-text
     use (hero accents, icon fills) where the 4.5:1 text rule doesn't apply. */
  --brand: #d93025;           /* primary CTA / "read" energy — AA-safe */
  --brand-dark: #b8241a;
  --brand-darker: #8f1c12;
  --brand-bright: #ff4b3e;    /* decorative/non-text accent only */
  --brand-soft: #ffe9e6;
  --brand-soft-border: #ffd1cb;

  --accent: #2f6fed;          /* links, secondary tags, rank badges */
  --accent-dark: #1e56c9;
  --accent-soft: #e8effe;

  --gold: #f5a623;            /* ratings */
  --success: #1fae6b;
  --success-soft: #e3f8ee;
  --warning: #b8790a;
  --warning-soft: #fff3dc;
  --danger: #d93025;
  --danger-soft: #fdeceb;

  /* ---- Neutrals (site chrome) ---- */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-alt: #f0f1f6;
  --surface-sunken: #eaecf3;
  --border: #e3e5ec;
  --border-strong: #cdd0dd;
  --text: #14161f;
  --text-soft: #565a6e;
  --text-faint: #6b6e82;      /* darkened from an earlier #8a8da3 (~3.3:1) to clear AA 4.5:1 */
  --text-on-brand: #ffffff;

  /* ---- Type ---- */
  --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-reading-sans: 'Inter', -apple-system, sans-serif;
  --font-reading-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-reading-nunito: 'Nunito', sans-serif;
  --font-reading-roboto: 'Roboto', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14.5px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 30px;

  /* ---- Space / radius / shadow ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.06), 0 1px 1px rgba(20, 22, 31, 0.04);
  --shadow-md: 0 6px 20px rgba(20, 22, 31, 0.08), 0 2px 6px rgba(20, 22, 31, 0.05);
  --shadow-lg: 0 16px 40px rgba(20, 22, 31, 0.14), 0 4px 12px rgba(20, 22, 31, 0.06);

  --header-h: 64px;
  --content-max: 1240px;
}

/* ==========================================================================
   Reader palettes — Phase 1.2a. Hex values are exactly as specified in the
   roadmap. Each theme sets both a background and a text/soft-text pair
   tuned for AA contrast against that specific background (see
   tworks-ui-document_ver1.0 §Accessibility for the computed ratios).
   ========================================================================== */

[data-reader-theme='light'] {
  --reader-bg: #ffffff;
  --reader-surface: #f7f7f8;
  --reader-text: #1c1c1c;
  --reader-text-soft: #6b6b6b;
  --reader-border: #e6e6e6;
  --reader-accent: var(--brand);
}

[data-reader-theme='sepia'] {
  --reader-bg: #fbf0d9;
  --reader-surface: #f5e6c8;
  --reader-text: #4a3b25;
  --reader-text-soft: #7a6748;
  --reader-border: #e6d6ae;
  --reader-accent: #8f5424;   /* darkened from #a9672f (~4.0:1) to clear AA 4.5:1 on this bg */
}

[data-reader-theme='green'] {
  --reader-bg: #e8f0e8;
  --reader-surface: #dde9dd;
  --reader-text: #223322;
  --reader-text-soft: #4c614c;
  --reader-border: #cbdccb;
  --reader-accent: #2f6b45;
}

[data-reader-theme='dark'] {
  --reader-bg: #1a1a1a;
  --reader-surface: #232323;
  --reader-text: #e8e8e8;
  --reader-text-soft: #a3a3a3;
  --reader-border: #333333;
  --reader-accent: #ff6b5e;
}