/* ===================================================================
   THEME VARIABLES
   Change colors, fonts, and spacing here to re-skin the entire site.
   Nothing below this file should ever have a hard-coded color/font.

   Palette, radii and shadow are matched to the main site
   (https://5thmr-v2-site.vercel.app) - see its app/globals.css :root.
   The look there is: near-black ground, translucent "glass" panels over a
   photographic background, generous corner radius, and one gold accent.
   =================================================================== */
:root {
  /* --- Brand palette (matched to the main site) --- */
  --color-bg: #0a0d10;
  --color-bg-panel: rgba(18, 23, 29, 0.86);
  --color-bg-panel-raised: rgba(28, 35, 43, 0.96);
  /* Faint white wash for rows, chips and hover states. */
  --color-bg-soft: rgba(255, 255, 255, 0.055);
  --color-header-bg: rgba(10, 13, 16, 0.72);
  --color-gold: #ebae46;
  --color-gold-bright: #ffd17c;
  --color-sage: #8db1a1;
  --color-text: #f6f7f8;
  --color-text-muted: #aeb6bd;
  --color-border: rgba(255, 255, 255, 0.12);
  /* Gold-tinted border for the active/emphasised card. */
  --color-border-strong: rgba(235, 174, 70, 0.35);
  --color-open: #4caf6e;
  --color-closed: #f87171;
  --color-filled: #ffffff;
  /* Ink for text sitting on a gold fill - the page ground, not pure black. */
  --color-on-gold: #0a0d10;
  /* Translucent status/accent washes, used for chips and message banners. */
  --color-gold-soft: rgba(235, 174, 70, 0.12);
  --color-open-soft: rgba(76, 175, 110, 0.12);
  --color-closed-soft: rgba(248, 113, 113, 0.12);
  /* Dim the page behind a modal. */
  --color-scrim: rgba(0, 0, 0, 0.7);

  /* --- Typography --- */
  --font-display: "Jura", sans-serif;
  --font-body: "Jura", -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.2rem;

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

  /* --- Misc --- */
  /* Panels and cards. Small controls use --radius-sm; pills use --radius-pill. */
  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --connector-color: var(--color-gold);
  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.34);
  --max-content-width: 1400px;
}