/*
 * tokens.css
 *
 * Design tokens for the RPLRT 2026 visual identity (ink-on-parchment,
 * centaur glyphs). Source of truth for color, type, and spacing used
 * across the microsite and referenced when specifying the printed booklet.
 *
 * Consolidated from the cover mock and glyph mockups worked out earlier
 * in the project. Where two mockups used slightly different values for
 * the "same" color, the more frequently used one was kept as canonical
 * (noted below) -- align older mockups to these values rather than the
 * other way round.
 */

:root {
  /* Color -- ink-on-parchment palette */
  --color-ink: #2b1c12;         /* primary text / glyph fill */
  --color-parchment: #e6ddc9;   /* page background. The first cover mock used
                                    #ecdfc4, a near-identical variant -- treat
                                    this token as canonical going forward. Cooled
                                    slightly (added a touch of blue, reduced
                                    saturation) 2026-08-10 -- the original #e9dcc0
                                    read as too uniformly yellow per design
                                    feedback; the gradient shape/stops themselves
                                    are unchanged, just the hue. */
  --color-parchment-light: #f2ede1; /* lighter, less-saturated cream -- paired with
                                    --color-parchment and --color-foxing in a gradient
                                    (see site/index.html's body background) instead of
                                    a single flat parchment fill, which read as too
                                    uniformly yellow. Added 2026-08-09, cooled 2026-08-10
                                    (see --color-parchment note). */
  --color-gold: #a8842c;        /* seam marks, halo rings, mid-weight accents */
  --color-gold-dark: #8a6d20;   /* rules, emblem strokes, borders */
  --color-foxing: #d3c3a1;      /* aged-paper age spots, used at low opacity (~0.5). Too
                                    light/low-saturation to use as a solid fill -- reads as
                                    "washed out" next to gold/ink at full opacity. Keep this
                                    one as a texture tint only. Cooled 2026-08-10, see
                                    --color-parchment note. */

  /* Neutral separator -- for horizontal rules that divide sections (cover/nav
     border, footer rule, panel/sponsor dividers) but shouldn't carry the gold
     accent color, which is reserved for actual gold-tier accents (room names,
     the cover's small decorative rule, hover states). Ink at low opacity so it
     adapts automatically with theme (see [data-theme="dark"] below) instead of
     needing a separately maintained dark value. Added 2026-08-10. */
  --color-rule: rgba(43, 28, 18, 0.16);

  /* Color -- room/location coding (schedule overview, booklet + microsite).
     Three colors of matched lightness and saturation, differentiated by hue rather than
     by light-vs-dark contrast, so no one room reads as more/less important than another.
     Loosely tied to illuminated-manuscript pigments (gold leaf / terracotta-sinopia /
     verdigris) to stay inside the ink-on-parchment identity rather than inventing an
     unrelated palette. Do not substitute --color-foxing here -- see note above. */
  --color-terracotta: #b3702a; /* Cripps 5 */
  --color-verdigris: #469682;  /* Cripps 1 */
  --color-room-auditorium: var(--color-gold);
  --color-room-cripps5: var(--color-terracotta);
  --color-room-cripps1: var(--color-verdigris);

  /* Color -- text hierarchy (muted browns, darkest to lightest) */
  --color-text-secondary: #6b5636; /* subtitles, second-level headings */
  --color-text-muted: #786944;     /* captions, italic notes */
  --color-text-faint: #8a7a58;     /* smallest print (sponsor lines, footers) */

  /*
   * Typography -- PLACEHOLDER.
   * Georgia has stood in for the real typefaces throughout every mockup
   * so far. The intended direction is a Church Slavonic-influenced display
   * face paired with a Western illuminated-manuscript-style body/Latin
   * face (uncial or early Carolingian character) -- see the project
   * memory on centaur glyphs for the reasoning. Swap these two variables
   * once real faces are selected and licensed; nothing else should need
   * to change.
   */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;

  /*
   * Booklet typography (print only) -- a settled decision, separate from
   * --font-display / --font-body above (which remain an unresolved
   * placeholder for the microsite's Church Slavonic-influenced identity
   * direction). Chosen for the printed booklet specifically for verified
   * Cyrillic letterform quality and legibility at print size for an
   * older-skewing audience -- see the Figma style guide and project
   * memory on font pairings for the full reasoning. Not used by the
   * microsite; do not swap these when the microsite display face is
   * decided.
   */
  --font-booklet-display: 'Lora', Georgia, serif;             /* headings, section titles, cover, keynote name */
  --font-booklet-body: 'Fira Sans', Arial, sans-serif;        /* body copy + labels (day / time / panel no. / topic). Replaced PT Sans -- PT Sans read too
                                                                  neutral next to Lora; Fira Sans has in-house-drawn (not retrofitted) Cyrillic and a bit
                                                                  more personality in the italic, confirmed via mockups/font-pairing-comparison.html */

  /*
   * Type scale (rem-based, for the microsite). The printed booklet is set
   * independently in real point sizes against its own trim size and grid --
   * these are not meant to be converted 1:1 into print.
   */
  --text-xs: 0.75rem;    /* 12px -- captions, sponsor lines */
  --text-sm: 0.875rem;   /* 14px -- eyebrow text, small labels */
  --text-base: 1rem;     /* 16px -- body copy */
  --text-lg: 1.125rem;   /* 18px -- subtitles */
  --text-xl: 1.5rem;     /* 24px -- subheadings */
  --text-2xl: 1.875rem;  /* 30px -- title lines, matches the cover mock scale */
  --text-3xl: 2.5rem;    /* 40px -- hero/display title */

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Misc */
  --radius-sm: 3px;
  --radius-md: 4px;
  --rule-weight: 1.5px;
}

/*
 * Dark mode -- "night manuscript": same ink-on-parchment identity inverted
 * (warm cream ink on a dark aged-leather ground) rather than a generic
 * gray/blue dark theme, so it still reads as this project rather than a
 * default OS dark mode. Every page that consumes these tokens as
 * var(--color-*) (never a hardcoded hex) gets dark mode for free once
 * something sets data-theme="dark" on <html> -- see site/index.html's
 * toggle script (added 2026-08-10) for how that attribute gets set, and
 * why it defaults to the system preference (prefers-color-scheme) rather
 * than always starting light.
 *
 * Two selectors, deliberately layered:
 *   1. @media (prefers-color-scheme: dark) -- applies automatically when
 *      the OS/browser is in dark mode AND the user hasn't made an explicit
 *      choice on this page (:not([data-theme="light"]) guards against the
 *      system being dark while the user explicitly picked light).
 *   2. [data-theme="dark"] -- applies whenever the toggle has explicitly
 *      set dark, regardless of system preference, so the manual choice
 *      always wins over prefers-color-scheme.
 * Keep these two blocks' custom-property values identical -- duplicated
 * instead of combined into one selector list because a single shared rule
 * can't express "system dark OR explicit dark, but not explicit light."
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ink: #f5f2ea;
    --color-parchment: #201a13;
    --color-parchment-light: #2b241a;
    --color-foxing: #140f0a;
    --color-gold: #c9a04e;
    --color-gold-dark: #dcb662;
    --color-terracotta: #c98643;
    --color-verdigris: #5aab96;
    --color-text-secondary: #d6d1c3;
    --color-text-muted: #aca897;
    --color-text-faint: #8d8979;
    --color-rule: rgba(236, 225, 201, 0.14);
  }
}
[data-theme="dark"] {
  /* --color-ink pushed much whiter (was #ece1c9) -- the previous value read
     as too uniformly khaki/yellow for body text specifically, per design
     feedback 2026-08-10. --color-text-secondary/muted/faint moved the same
     direction (less saturated, more neutral-gray) so the hierarchy still
     holds relative to the now-much-lighter ink instead of clustering
     together. Backgrounds/accents (parchment/foxing/gold/terracotta/
     verdigris) are unchanged -- the complaint was about text, not the
     overall palette. */
  --color-ink: #f5f2ea;
  --color-parchment: #201a13;
  --color-parchment-light: #2b241a;
  --color-foxing: #140f0a;
  --color-gold: #c9a04e;
  --color-gold-dark: #dcb662;
  --color-terracotta: #c98643;
  --color-verdigris: #5aab96;
  --color-text-secondary: #d6d1c3;
  --color-text-muted: #aca897;
  --color-text-faint: #8d8979;
  --color-rule: rgba(236, 225, 201, 0.14);
}