/* PS1-Seattle — Color System
   ---------------------------------------------------------------
   A premium, high-trust security palette: near-black surfaces,
   soft platinum text, and a single metallic GOLD brand accent.
   Light mode is a supported theme (toggle on the production site).
   ---------------------------------------------------------------*/

:root {
  /* ---- Brand gold (the one accent that matters) ---- */
  --gold: #d4af37;              /* Brand Gold — base accent */
  --gold-bright: #f3e7c4;       /* Gold highlight (top of metallic ramp) */
  --gold-deep: #aa8822;         /* Gold shadow (bottom of metallic ramp) */
  --gold-ink: #996600;          /* Gold text on light surfaces (AA) */
  --gold-metallic: linear-gradient(135deg, #f3e7c4 0%, #d4af37 50%, #aa8822 100%); /* @kind color */
  --gold-glow: rgba(212, 175, 55, 0.25);

  /* ---- Neutral / ink ramp (dark-first) ---- */
  --ink-950: #060608;          /* Deepest — footer */
  --ink-900: #0a0a0b;          /* Page background */
  --ink-850: #121215;          /* Card surface */
  --ink-800: #18181f;          /* Card hover surface */
  --ink-700: #222226;          /* Scrollbar / hairlines */
  --platinum: #d4d4d8;         /* Body text */
  --white: #ffffff;            /* Headings / high-emphasis */
  --muted: #8e8e93;            /* Muted / captions */

  /* ---- Semantic surfaces (dark theme defaults) ---- */
  --bg: var(--ink-900);
  --bg-deep: var(--ink-950);
  --surface-card: var(--ink-850);
  --surface-card-hover: var(--ink-800);
  --surface-tint: rgba(18, 18, 21, 0.3);     /* alternating section wash */
  --surface-gold-wash: rgba(212, 175, 55, 0.04);

  /* ---- Semantic text ---- */
  --text-body: var(--platinum);
  --text-strong: var(--white);
  --text-muted: var(--muted);
  --text-accent: var(--gold);
  --text-hero: rgba(255, 255, 255, 0.88);

  /* ---- Borders ---- */
  --border: rgba(255, 255, 255, 0.07);
  --border-gold: rgba(212, 175, 55, 0.15);
  --border-gold-hover: rgba(212, 175, 55, 0.40);

  /* ---- Status ---- */
  --live: #22c55e;             /* live/online dot */
  --warn: #ef4444;

  /* ---- Patriotic micro-accents (animated wordmark only) ---- */
  --flag-red: #ef4444;
  --flag-blue: #3b82f6;
}

/* ---------------------------------------------------------------
   Light Mode — opt-in via .light-mode on a wrapping element.
   Surfaces flip to paper-white; gold deepens for contrast.
   ---------------------------------------------------------------*/
.light-mode {
  --bg: #f8f9fa;
  --bg-deep: #f1f3f5;
  --surface-card: #ffffff;
  --surface-card-hover: #f1f3f5;
  --surface-tint: rgba(240, 242, 245, 0.4);
  --surface-gold-wash: rgba(212, 175, 55, 0.10);

  --text-body: #343a40;
  --text-strong: #111111;
  --text-muted: #6c757d;
  --text-accent: var(--gold-ink);
  --text-hero: #495057;

  --border: rgba(0, 0, 0, 0.08);
  --border-gold: rgba(212, 175, 55, 0.35);
  --border-gold-hover: rgba(212, 175, 55, 0.70);
  --gold-glow: rgba(212, 175, 55, 0.15);
}