/* ==========================================================================
   Specula One — Design Tokens
   Warm ivory / stone / charcoal / restrained bronze. Loaded on every page
   (index.html, about.html, report.html) as the single token source.
   ========================================================================== */

:root {
  /* ---- surfaces (light) ---- */
  --ivory: #F6F2EA;
  --ivory-deep: #EFE8DA;
  --stone: #E4DBC9;
  --stone-line: #DCD1BC;

  /* ---- surfaces (dark) ---- */
  --charcoal: #15130F;
  --charcoal-soft: #1D1A15;
  --charcoal-line: #2B271F;

  /* ---- accent ---- */
  --bronze: #B08E5E;
  --bronze-soft: #C7A97A;
  /* Deep enough for small bronze text to clear WCAG AA on both --ivory and
     the darker --ivory-deep tint. --bronze itself measures 2.73:1 on --ivory
     and is reserved for larger marks and non-text accents. */
  --bronze-deep: #735835;
  --bronze-line: rgba(176, 142, 94, 0.35);
  --bronze-glow: rgba(199, 169, 122, 0.28);

  /* ---- ink (on light) ---- */
  --ink: #211D16;
  --ink-dim: #6E6656;
  --ink-faint: #A79E8A;

  /* ---- paper (on dark) ---- */
  --paper: #F6F2EA;
  --paper-dim: rgba(246, 242, 234, 0.62);

  /* ---- type ---- */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* ---- type scale ----
     h2 sized to support content, not dominate a one-viewport section */
  --fs-hero: clamp(44px, 6.2vw, 88px);
  --fs-h2: clamp(26px, 2.6vw, 36px);
  --fs-eyebrow: 12px;
  --fs-nav: 13px;
  --fs-body: 17px;

  /* ---- spacing ----
     trimmed so a single-statement section fits one desktop viewport
     without forcing an immediate scroll */
  --space-section: clamp(64px, 6.5vw, 112px);
  --space-gutter: 8vw;

  /* ---- motion ---- */
  --ease-elegant: cubic-bezier(.22, .8, .2, 1);

  /* ---- report palette ----
     The audit report page (report.html/report.css/report.js) uses its own
     dark palette, kept separate from --charcoal/--bronze above on purpose:
     these are cool-neutral (a blue-grey near-black, a warm-white gold),
     while --charcoal/--bronze are warm-neutral. They read close but are not
     the same colors, so they stay distinct values rather than being merged
     into one. This is the only place they're defined; report.html loads
     this file so nothing else declares its own copy. */
  --report-bg: #0C0C0F;
  --report-surface: #141418;
  --report-surface2: #1C1C22;
  --report-border: #28282F;
  --report-gold: #C9AA71;
  --report-gold-bg: rgba(201, 170, 113, 0.12);
  --report-gold-border: rgba(201, 170, 113, 0.35);
  --report-silver: #A9AAB4;
  --report-text: #EEEAE4;
  --report-dim: #888898;
  --report-muted: #444450;
}