/* ============================================================
   BANDBEE DESIGN TOKENS & THEMES
   Extracted from demo.html — Single Source of Truth
   ============================================================ */

:root {
  /* Spacing (8pt grid) */
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px;
  --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-40: 40px;
  --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-80: 80px;
  --s-96: 96px; --s-128: 128px;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem;
  --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-extrabold: 800;

  /* Radii */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
  --duration-slow: 400ms;

  /* Layout */
  --max-w: 1140px;
  --header-h: 64px;
}

/* --- Theme 1: Bandbee Dark (Default) --- */
[data-theme="bandbee-dark"] {
  --bg: #0c0c0e;
  --bg-elevated: #141416;
  --surface: #1a1a1e;
  --surface-hover: #222226;
  --surface-active: #2a2a2e;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --text: #e8e8ec;
  --text-secondary: #9898a0;
  --text-tertiary: #6a6a72;
  --primary: #e5a000;
  --primary-hover: #f0b020;
  --primary-text: #0c0c0e;
  --accent: #ff8c00;
  --accent-soft: rgba(229,160,0,0.12);
  --success: #34d399;
  --success-soft: rgba(52,211,153,0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251,191,36,0.12);
  --danger: #e07060;
  --danger-soft: rgba(224,112,96,0.12);
  --info: #60a5fa;
  --info-soft: rgba(96,165,250,0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(229,160,0,0.15);
  --input-bg: #1e1e22;
  --header-bg: rgba(12,12,14,0.85);
  --hero-gradient: linear-gradient(135deg, #0c0c0e 0%, #1a1510 100%);
  --card-gradient: linear-gradient(145deg, var(--surface), var(--bg-elevated));
}

/* --- Theme 2: Bandbee Light --- */
[data-theme="bandbee-light"] {
  --bg: #f1f5f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --surface-active: #e2e8f0;
  --border: rgba(15,23,42,0.08);
  --border-strong: rgba(15,23,42,0.15);
  --text: #3d2800;
  --text-secondary: #3d2800;
  --text-tertiary: #64748b;
  --primary: #e5a000;
  --primary-hover: #f0b020;
  --primary-text: #3d2800;
  --accent: #ff8c00;
  --accent-soft: rgba(229,160,0,0.08);
  --success: #10b981;
  --success-soft: rgba(16,185,129,0.08);
  --warning: #f59e0b;
  --warning-soft: rgba(245,158,11,0.08);
  --danger: #c44d3a;
  --danger-soft: rgba(196,77,58,0.08);
  --info: #0ea5e9;
  --info-soft: rgba(14,165,233,0.08);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg: 0 8px 32px rgba(15,23,42,0.12);
  --shadow-glow: 0 0 24px rgba(229,160,0,0.1);
  --input-bg: #ffffff;
  --header-bg: rgba(241,245,249,0.9);
  --hero-gradient: linear-gradient(135deg, #f1f5f9 0%, #fef9ee 100%);
  --card-gradient: linear-gradient(145deg, #ffffff, #f8fafc);
}