/* =====================================================================
   Design tokens. Every colour on the site comes from here.
   Dark is the default; [data-theme="light"] swaps the palette.
   Components only ever use the semantic names (--color-*), never hex.

   Dark palette follows mock-up A (Hero First) in the ZBF Homepage
   Directions canvas.

   Contrast notes (WCAG AA needs 4.5:1 for body text):
   - Dark mode: primary buttons are #00AAAA with near-black text (~7:1);
     links use the lighter #00C2C2 (~8:1 on the background).
   - On white #00AAAA is only ~2.9:1, so light mode uses a deeper teal
     (#007878, ~5.4:1) for text and buttons. #00AAAA stays for decoration.
   ===================================================================== */

:root {
  /* Brand (theme-independent) */
  --brand-teal: #00aaaa;

  /* Typography (loaded from Google Fonts in head.html; system fonts as fallback) */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Spacing scale */
  --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: 4.5rem;

  /* Shape and layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --container-max: 1160px;
  --gutter: 16px;
  --header-height: 64px;

  --transition-fast: 120ms ease;

  /* ---- Dark palette (default) ---- */
  color-scheme: dark;
  --color-bg: #0b0f10;
  --color-bg-elevated: #0e1415;
  --color-surface: #12191a;
  --color-surface-raised: #1e2a2b;
  --color-border: #1f2b2c;
  --color-border-strong: #2a4040;

  --color-text: #e6f0f0;
  --color-text-muted: #a9bdbd;
  --color-text-subtle: #8fa6a6;
  --color-text-nav: #b7caca;

  --color-link: #00c2c2;
  --color-link-hover: #5fe0e0;
  --color-accent: #00aaaa;           /* primary buttons, accent marks */
  --color-chart-bar: #00aaaa;
  --color-stage-1: #5c7a7a;
  --color-stage-2: #3a9a9a;
  --color-stage-3: #00aaaa;
  --color-stage-4: #5fe0e0;
  --color-accent-hover: #1cc3c3;
  --color-accent-contrast: #061314;  /* text on accent backgrounds */
  --color-accent-soft: rgba(0, 170, 170, 0.14);
  --color-accent-glow: rgba(0, 170, 170, 0.18);
  --color-accent-surface: #0f2a2a;   /* join banner, closing call to action */
  --color-accent-surface-border: #1c4a4a;
  --color-accent-surface-text: #cfe8e8;
  --color-focus: #5fe0e0;

  --color-info-bg: #0f2a33;
  --color-info-border: #1f5b6b;
  --color-info-text: #bfe9f2;
  --color-success-bg: #0f2a1d;
  --color-success-border: #24613f;
  --color-success-text: #bdebcf;
  --color-warning-bg: #2e2410;
  --color-warning-border: #6b5420;
  --color-warning-text: #f3dfae;
  --color-danger-bg: #331416;
  --color-danger-border: #7a2a2f;
  --color-danger-text: #f6c4c6;

  --color-star: #5fe0e0;

  /* Discord-style message preview */
  --color-embed-canvas: #12191a;
  --color-embed-card: #0e1415;
  --color-embed-text: #a9bdbd;
  --color-embed-muted: #8fa6a6;
  --color-embed-name: #e6f0f0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f5f8f8;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #eef4f4;
  --color-border: #d5e1e2;
  --color-border-strong: #b7c9cb;

  --color-text: #0f1c1f;
  --color-text-muted: #46595d;
  --color-text-subtle: #5d7175;
  --color-text-nav: #3b4f53;

  --color-link: #007878;
  --color-link-hover: #005353;
  --color-accent: #007878;
  --color-chart-bar: #009494;
  --color-stage-1: #8fa8a8;
  --color-stage-2: #4da3a3;
  --color-stage-3: #009494;
  --color-stage-4: #006464;
  --color-accent-hover: #005f5f;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: rgba(0, 120, 120, 0.1);
  --color-accent-glow: rgba(0, 170, 170, 0.14);
  --color-accent-surface: #e2f2f2;
  --color-accent-surface-border: #b3d9d9;
  --color-accent-surface-text: #0d3a3a;
  --color-focus: #006a6a;

  --color-info-bg: #e5f5f8;
  --color-info-border: #9fd3de;
  --color-info-text: #0d4350;
  --color-success-bg: #e6f6ec;
  --color-success-border: #9fd6b3;
  --color-success-text: #11472a;
  --color-warning-bg: #fdf4de;
  --color-warning-border: #e6c87a;
  --color-warning-text: #5a4204;
  --color-danger-bg: #fdeaea;
  --color-danger-border: #eba5a8;
  --color-danger-text: #6e1519;

  --color-star: #007878;

  --color-embed-canvas: #ffffff;
  --color-embed-card: #f2f3f5;
  --color-embed-text: #313338;
  --color-embed-muted: #5c5e66;
  --color-embed-name: #060607;

  --shadow-sm: 0 1px 2px rgba(15, 28, 31, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 28, 31, 0.08);
  --shadow-lg: 0 18px 50px rgba(15, 28, 31, 0.12);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}