/* ============================================================
   jumpin. — Design Tokens (v2)
   All CSS custom properties. Source of truth for colour,
   spacing, radius, shadow, typography, animation timing.
   ============================================================ */

/* ─── Base (Dark mode canonical) ────────────────────────────── */
:root {
  /* Colour: Backgrounds */
  --color-bg:          #09090B;
  --color-bg-2:        #111113;
  --color-bg-3:        #18181B;
  --color-surface:     #1C1C20;
  --color-surface-2:   #222226;

  /* Colour: Borders */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Colour: Text */
  --color-text:   #FAFAF9;
  --color-text-2: rgba(250, 250, 249, 0.80); /* Increased from 0.70 */
  --color-text-3: rgba(250, 250, 249, 0.55); /* Increased from 0.40 */

  /* Colour: Brand */
  --color-primary:     #C6FF00;
  --color-primary-fg:  #0A0A0B;
  --color-primary-dim: rgba(198, 255, 0, 0.14);
  --color-primary-glow: rgba(198, 255, 0, 0.22);

  /* Colour: Semantic */
  --color-accent:  #A78BFA;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error:   #F87171;
  --color-info:    #60A5FA;

  /* Colour: Semantic dim */
  --color-success-dim: rgba(52, 211, 153, 0.14);
  --color-warning-dim: rgba(251, 191, 36, 0.14);
  --color-error-dim:   rgba(248, 113, 113, 0.14);
  --color-info-dim:    rgba(96, 165, 250, 0.14);

  /* Border radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* Elevation / Shadows */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.24), 0 1px 4px rgba(0,0,0,0.12);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.16);
  --shadow-primary: 0 4px 24px rgba(198, 255, 0, 0.20);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  52px;
  --text-hero: clamp(40px, 8vw, 80px);

  /* Line heights */
  --leading-tight:  1.0;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 60px;
  --bottom-nav-height: 64px;

  /* Animation timing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  /* Glass material */
  --glass-bg:     rgba(9, 9, 11, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Mesh gradient positions (animated via JS/CSS) */
  --mesh-x1: 20%; --mesh-y1: 15%;
  --mesh-x2: 80%; --mesh-y2: 10%;
  --mesh-x3: 50%; --mesh-y3: 85%;

  /* Category placeholder gradient colours */
  --cat-music:     linear-gradient(135deg, hsl(265,60%,18%), hsl(200,60%,15%));
  --cat-tech:      linear-gradient(135deg, hsl(190,60%,12%), hsl(240,55%,18%));
  --cat-nightlife: linear-gradient(135deg, hsl(290,55%,15%), hsl(330,50%,12%));
  --cat-culture:   linear-gradient(135deg, hsl(35,45%,14%), hsl(265,50%,16%));
  --cat-campus:    linear-gradient(135deg, hsl(145,40%,12%), hsl(200,50%,14%));
  --cat-comedy:    linear-gradient(135deg, hsl(40,55%,14%), hsl(15,50%,12%));
  --cat-sports:    linear-gradient(135deg, hsl(120,40%,11%), hsl(200,45%,13%));
  --cat-other:     linear-gradient(135deg, hsl(265,40%,14%), hsl(230,45%,16%));
}

/* ─── Light mode overrides ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:          #FAFAF9;
    --color-bg-2:        #F2F1ED; /* Darker than F5F5F3 */
    --color-bg-3:        #EAE9E4; /* Darker than EEEDE9 */
    --color-surface:     #FFFFFF;
    --color-surface-2:   #F0F0EE; /* More distinct than F9F9F7 */

    --color-border:       rgba(0, 0, 0, 0.12); /* Slightly stronger */
    --color-border-strong: rgba(0, 0, 0, 0.20);

    --color-text:   #0C0C0D;
    --color-text-2: rgba(12, 12, 13, 0.72); /* Increased from 0.65 */
    --color-text-3: rgba(12, 12, 13, 0.50); /* Increased from 0.38 */

    /* IMPORTANT: Lime #C6FF00 fails WCAG on white — swap to dark olive */
    --color-primary:     #5B6A00;
    --color-primary-fg:  #FFFFFF;
    --color-primary-dim: rgba(91, 106, 0, 0.10);
    --color-primary-glow: rgba(91, 106, 0, 0.16);

    --color-accent:  #6D28D9;
    --color-success: #059669;
    --color-warning: #D97706;
    --color-error:   #DC2626;
    --color-info:    #2563EB;

    --color-success-dim: rgba(5, 150, 105, 0.10);
    --color-warning-dim: rgba(217, 119, 6, 0.10);
    --color-error-dim:   rgba(220, 38, 38, 0.10);
    --color-info-dim:    rgba(37, 99, 235, 0.10);

    --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    --shadow-3: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-primary: 0 4px 24px rgba(91, 106, 0, 0.18);

    --glass-bg:     rgba(255, 255, 255, 0.82);
    --glass-border: rgba(0, 0, 0, 0.07);
  }
}

[data-theme="light"] {
  --color-bg:          #FAFAF9;
  --color-bg-2:        #F2F1ED;
  --color-bg-3:        #EAE9E4;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #F0F0EE;
  --color-border:       rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.20);
  --color-text:   #0C0C0D;
  --color-text-2: rgba(12, 12, 13, 0.72);
  --color-text-3: rgba(12, 12, 13, 0.50);
  --color-primary:     #5B6A00;
  --color-primary-fg:  #FFFFFF;
  --color-primary-dim: rgba(91, 106, 0, 0.10);
  --color-primary-glow: rgba(91, 106, 0, 0.16);
  --color-accent:  #6D28D9;
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #2563EB;
  --color-success-dim: rgba(5, 150, 105, 0.10);
  --color-warning-dim: rgba(217, 119, 6, 0.10);
  --color-error-dim:   rgba(220, 38, 38, 0.10);
  --color-info-dim:    rgba(37, 99, 235, 0.10);
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-primary: 0 4px 24px rgba(91, 106, 0, 0.18);
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0, 0, 0, 0.07);
}