/* ==========================================================================
   SPORAFIND DESIGN TOKENS — single source of truth (2026-10-01)
   Canonical values unified from frontend/*.html + views/*.ejs.
   Usage: <link rel="stylesheet" href="/css/tokens.css">
   DO NOT re-declare :root in pages. Page-specific layout stays in <style>.
   Breakpoint standard: 640 / 900 / 1200.
   ========================================================================== */
:root {
  /* Brand */
  --green: #006B3C;
  --green-dark: #004d2b;
  --green-light: #E8F5EE;
  --green-glow: rgba(0, 107, 60, 0.08);
  --gl: #00a85a;              /* bright accent for dark surfaces */
  --gold: #D4A017;
  --gold-dark: #a87d10;
  --gold-light: #FFF8E7;
  --gold-glow: rgba(212, 160, 23, 0.1);

  /* Navy (marketing dark surfaces) */
  --navy: #080D1A;
  --navy2: #0E1627;
  --navy3: #16213A;
  --navy4: #1C2A4A;

  /* Cream (marketing light surfaces) */
  --cream: #F5F0E8;
  --cream2: #EDE8DF;
  --cream3: #E5DFD5;

  /* Light text */
  --text-dark: #0A0E1A;
  --text-mid: #3D4A5C;
  --text-muted: #8A9BB0;
  --white: #FFFFFF;
  --slate: #8A9BB0;
  --slate2: #5A6880;
  --slate3: #B8C5D4;
  --bg: #F4F6F9;
  --bg2: #EBEEF3;

  /* Dark ops surfaces + text */
  --s0: #0f0f0f;
  --s1: #1a1a1a;
  --s2: #242424;
  --s3: #2e2e2e;
  --bd: #2a2a2a;
  --bds: #383838;
  --t1: #e8e8e8;
  --t2: #a0a0a0;
  --tm: #666666;

  /* Semantic */
  --blue: #2563EB;
  --blue-light: #DBEAFE;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --teal: #0E7490;
  --teal-light: #ECFEFF;
  --amber: #B45309;
  --orange: #EA580C;
  --orange-light: #FFEDD5;
  --red: #ef4444;             /* dark-theme error */
  --red-deep: #DC2626;        /* light-theme error/danger */
  --red-light: #FEE2E2;
  --red-dark: #B91C1C;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* App layout */
  --sidebar-w: 240px;
  --header-h: 64px;
}