/*
 * Design tokens for Rapid Stacker Collab.
 *
 * Copied from the Astro Tools hub (photon-ledger-website/website/css/tokens.css, EKE Services LLC) so the two
 * sites read as one family. Nothing is shared at runtime: this file is a copy and may drift on purpose.
 *
 * What differs from the hub:
 *   - the accent is teal-led (--primary) where the hub's is pink, so a visitor can tell the products apart;
 *   - there is a light theme. The hub is dark only. Light applies when the visitor's system asks for it, or
 *     when <html data-theme="light"> is set by the toggle (js/theme-init.js, js/ui.js); data-theme="dark"
 *     forces dark on a light system. The two light blocks below must stay identical
 *     (test/contrast.test.mjs checks that, and checks every text pair for WCAG AA);
 *   - every colour a component uses is a token, so a theme change never needs a component edit.
 */
:root {
  color-scheme: dark;

  --surface-0: #14152B;
  --surface-1: #1E1F3D;
  --surface-2: #2A2C52;
  --surface-3: #353871;
  --border:    #3D406B;
  --border-input: #7378A8;

  --text:       #F2F3FA;
  --text-muted: #A1A4C2;

  /* Collab accent: teal. --primary fills buttons; --link colours text links. */
  --primary:    #4ECDC4;
  --primary-hi: #7BE0D8;
  --on-primary: #06201E;
  --primary-glow: rgba(78, 205, 196, 0.30);
  --link:       #4ECDC4;
  --link-hover: #FF87B0;
  --secondary:  #FF6B9D;

  --success: #95E06C;
  --warning: #FFD166;
  --error:   #FF6B6B;

  /* The two publishing modes (plan 13 Q4). Live is the running accumulator; gold is a full integration. */
  --live: #6BB6FF;
  --gold: #FFD166;

  /* Filter colours: chips, chart series, leaderboard. */
  --f-lum:  #E8E8F0;
  --f-red:  #FF6B6B;
  --f-green:#95E06C;
  --f-blue: #6BB6FF;
  --f-ha:   #FF5C8F;
  --f-oiii: #4ECDC4;
  --f-sii:  #FF8C42;
  --f-other:#B9A6FF;

  /* Previews are dark images with transparent edges; they sit on a dark mat in both themes. */
  --preview-bg: #05060F;
  --preview-text: #E8E9F5;

  --nav-bg: rgba(20, 21, 43, 0.88);
  --overlay: rgba(5, 6, 16, .82);
  --badge-ok-bg: rgba(149, 224, 108, .16);
  --badge-warn-bg: rgba(255, 209, 102, .16);
  --badge-err-bg: rgba(255, 107, 107, .16);
  --badge-info-bg: rgba(107, 182, 255, .16);
  --badge-accent-bg: rgba(78, 205, 196, .16);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 14px;
  --shadow-card:  0 6px 24px rgba(0,0,0,0.55);
  --shadow-hover: 0 10px 32px rgba(0,0,0,0.65);

  --font-prop: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container-max: 1200px;
  --page-gutter: clamp(16px, 4vw, 48px);

  --size-h1: clamp(34px, 5vw, 52px);
  --size-h2: clamp(25px, 3.2vw, 34px);
  --size-h3: 21px;
  --size-body: 16px;
  --size-small: 13.5px;
  --size-mono: 14px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --surface-0: #F4F5FB;
    --surface-1: #FFFFFF;
    --surface-2: #ECEEF8;
    --surface-3: #DCE0F1;
    --border:    #B4B9D6;
    --border-input: #6B6F94;

    --text:       #14152B;
    --text-muted: #494C6E;

    --primary:    #0B6B65;
    --primary-hi: #0E847D;
    --on-primary: #FFFFFF;
    --primary-glow: rgba(11, 107, 101, 0.22);
    --link:       #0B6B65;
    --link-hover: #B1124F;
    --secondary:  #B1124F;

    --success: #2A6E0E;
    --warning: #7A5200;
    --error:   #B3261E;

    --live: #12589E;
    --gold: #7A5200;

    --f-lum:  #4A4D66;
    --f-red:  #B3261E;
    --f-green:#2A6E0E;
    --f-blue: #12589E;
    --f-ha:   #B1124F;
    --f-oiii: #0B6B65;
    --f-sii:  #A04A00;
    --f-other:#5B3FB8;

    --nav-bg: rgba(244, 245, 251, 0.9);
    --overlay: rgba(20, 21, 43, .6);
    --badge-ok-bg: rgba(42, 110, 14, .12);
    --badge-warn-bg: rgba(122, 82, 0, .12);
    --badge-err-bg: rgba(179, 38, 30, .10);
    --badge-info-bg: rgba(18, 88, 158, .10);
    --badge-accent-bg: rgba(11, 107, 101, .12);

    --shadow-card:  0 4px 16px rgba(20,21,43,0.10);
    --shadow-hover: 0 8px 26px rgba(20,21,43,0.16);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --surface-0: #F4F5FB;
  --surface-1: #FFFFFF;
  --surface-2: #ECEEF8;
  --surface-3: #DCE0F1;
  --border:    #B4B9D6;
  --border-input: #6B6F94;

  --text:       #14152B;
  --text-muted: #494C6E;

  --primary:    #0B6B65;
  --primary-hi: #0E847D;
  --on-primary: #FFFFFF;
  --primary-glow: rgba(11, 107, 101, 0.22);
  --link:       #0B6B65;
  --link-hover: #B1124F;
  --secondary:  #B1124F;

  --success: #2A6E0E;
  --warning: #7A5200;
  --error:   #B3261E;

  --live: #12589E;
  --gold: #7A5200;

  --f-lum:  #4A4D66;
  --f-red:  #B3261E;
  --f-green:#2A6E0E;
  --f-blue: #12589E;
  --f-ha:   #B1124F;
  --f-oiii: #0B6B65;
  --f-sii:  #A04A00;
  --f-other:#5B3FB8;

  --nav-bg: rgba(244, 245, 251, 0.9);
  --overlay: rgba(20, 21, 43, .6);
  --badge-ok-bg: rgba(42, 110, 14, .12);
  --badge-warn-bg: rgba(122, 82, 0, .12);
  --badge-err-bg: rgba(179, 38, 30, .10);
  --badge-info-bg: rgba(18, 88, 158, .10);
  --badge-accent-bg: rgba(11, 107, 101, .12);

  --shadow-card:  0 4px 16px rgba(20,21,43,0.10);
  --shadow-hover: 0 8px 26px rgba(20,21,43,0.16);
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations"),
       url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}