/* ==========================================================================
   South Coast LGBTQ+ Museum - Design Tokens
   "Refraction" theme: dark, modern, spectrum-lit. Same family as PRISM
   (deep violet-black, gold + rainbow, Poppins display), not a copy.
   Token NAMES are kept stable so all components inherit the re-skin.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* --- Surfaces (dark) --- (paper-* are now dark panels, brightest = -400) */
  --ink-950: #080611;   /* deepest */
  --paper-100: #0e0a1a; /* page background */
  --paper-200: #150f28; /* raised band */
  --paper-300: #1b1436; /* panel */
  --paper-400: #241a45; /* panel-2 */
  --bg-raised: #1b1436;

  /* --- Text (light) --- */
  --ink-900: #f6f3ff;   /* primary text + headings */
  --ink-800: #241a45;   /* (panel tone, used by some gradients) */
  --ink-700: #d2caec;   /* soft text (AA on dark) */
  --ink-500: #ab9fd2;   /* muted text (AA on dark) */
  --ink-300: #8d82b6;   /* faint / decorative */

  /* warm-lit dark surfaces */
  --glow-warm: rgba(255, 198, 41, 0.10);
  --glow-warm-strong: rgba(139, 63, 196, 0.24);
  --wall-dark: #0e0a1a;
  --wall-text: #f6f3ff;
  --wall-text-soft: #c8bfe4;

  /* --- Gold (the primary accent; "brass-*" names kept) --- */
  --brass-600: #f2a900;
  --brass-500: #ffc629;
  --brass-400: #ffd45e;
  --brass-300: #ffe08f;
  --brass-tint: rgba(255, 198, 41, 0.12);

  /* --- Purple accent --- */
  --purple: #8b3fc4;
  --purple-bright: #a45ce0;

  /* --- Spectrum wing keys (vivid on dark) --- */
  --spec-red: #ff4d68;
  --spec-orange: #ff9d3c;
  --spec-gold: #ffd400;
  --spec-green: #2fd07e;
  --spec-blue: #4d8bff;
  --spec-violet: #b06ad6;
  --spec-red-tint: rgba(255, 77, 104, 0.14);
  --spec-orange-tint: rgba(255, 157, 60, 0.14);
  --spec-gold-tint: rgba(255, 212, 0, 0.14);
  --spec-green-tint: rgba(47, 208, 126, 0.14);
  --spec-blue-tint: rgba(77, 139, 255, 0.14);
  --spec-violet-tint: rgba(176, 106, 214, 0.16);

  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;

  /* spectrum gradients */
  --spectrum: linear-gradient(90deg, #e40303, #ff8c00, #ffd400, #008026, #004dff, #750787);
  --spectrum-soft: linear-gradient(90deg, #ff5a6e, #ffb15a, #ffe45a, #5ad17e, #5a8cff, #b06ad6);

  /* --- Confidence (brightened for dark) --- */
  --conf-verified: #4fd18b;
  --conf-corroborated: #5a8cff;
  --conf-oral: #ffc629;
  --conf-unknown: #9d92c0;

  /* --- Semantic --- */
  --bg: var(--paper-100);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --accent: var(--brass-500);
  --focus: var(--purple-bright);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);

  /* --- Type --- */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-50: 0.75rem; --fs-100: 0.875rem; --fs-200: 1rem; --fs-300: 1.125rem;
  --fs-400: 1.4rem; --fs-500: 1.9rem; --fs-600: 2.6rem; --fs-700: 3.5rem; --fs-800: 4.8rem;
  --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6;
  --measure: 68ch;

  /* --- Spacing --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;

  /* --- Structure (rounded, modern) --- */
  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px;
  --container: 1200px; --container-narrow: 760px;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 28px 70px -22px rgba(0, 0, 0, 0.78);
  --glow: 0 0 40px -8px rgba(164, 92, 224, 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
}