/* ============================================================
   variables.css — Design Tokens
   Central source of truth for colors, typography, spacing, 
   and other design system values.
   ============================================================ */

:root {
   /* ---- Color Palette ---- */
   /* Dark backgrounds */
   --color-bg-primary: #0b0b1a;
   /* Main page background — deep space blue-black */
   --color-bg-secondary: #12122a;
   /* Card/section backgrounds — slightly lighter */
   --color-bg-tertiary: #1a1a3e;
   /* Elevated surfaces (modals, dropdowns) */
   --color-bg-hover: #22224a;
   /* Hover state for surfaces */

   /* Vibrant accents */
   --color-accent-primary: #00e5ff;
   /* Electric cyan — main accent */
   --color-accent-secondary: #ff2d7b;
   /* Hot pink — secondary accent */
   --color-accent-tertiary: #7c4dff;
   /* Electric purple — tertiary accent */
   --color-accent-yellow: #ffea00;
   /* Neon yellow — highlights & badges */

   /* Accent transparencies (for glows, backgrounds) */
   --color-accent-primary-20: rgba(0, 229, 255, 0.2);
   --color-accent-primary-10: rgba(0, 229, 255, 0.1);
   --color-accent-secondary-20: rgba(255, 45, 123, 0.2);
   --color-accent-tertiary-20: rgba(124, 77, 255, 0.2);

   /* Text */
   --color-text-primary: #e8e8f0;
   /* Main body text — soft white */
   --color-text-secondary: #a0a0b8;
   /* Muted text — labels, captions */
   --color-text-tertiary: #6a6a80;
   /* Very muted — timestamps, hints */

   /* Borders */
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);

   /* ---- Typography ---- */
   /* Fonts loaded via Google Fonts in HTML <head>:
     - Space Grotesk: fun geometric sans for headings
     - Inter: clean readable sans for body */
   --font-heading: 'Space Grotesk', sans-serif;
   --font-body: 'Inter', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

   /* Font sizes (fluid scale) */
   --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
   --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.9rem);
   --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
   --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
   --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
   --text-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
   --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
   --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

   /* Font weights */
   --weight-normal: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;

   /* ---- Spacing (4px base) ---- */
   --space-2xs: 0.25rem;
   /* 4px */
   --space-xs: 0.5rem;
   /* 8px */
   --space-sm: 0.75rem;
   /* 12px */
   --space-md: 1rem;
   /* 16px */
   --space-lg: 1.5rem;
   /* 24px */
   --space-xl: 2rem;
   /* 32px */
   --space-2xl: 3rem;
   /* 48px */
   --space-3xl: 4rem;
   /* 64px */
   --space-4xl: 6rem;
   /* 96px */

   /* ---- Layout ---- */
   --max-width: 1200px;
   /* Content max width */
   --nav-height: 4rem;
   /* Fixed nav height */
   --border-radius-sm: 0.375rem;
   /* 6px */
   --border-radius-md: 0.75rem;
   /* 12px */
   --border-radius-lg: 1rem;
   /* 16px */
   --border-radius-xl: 1.5rem;
   /* 24px */
   --border-radius-full: 9999px;
   /* Pill shape */

   /* ---- Shadows & Effects ---- */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
   --shadow-glow-primary: 0 0 20px rgba(0, 229, 255, 0.3);
   --shadow-glow-secondary: 0 0 20px rgba(255, 45, 123, 0.3);

   /* ---- Transitions ---- */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 400ms ease;
   --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Light Theme Overrides ---- */
/* Applied when data-theme="light" is set on <html>.
   Only color tokens change — spacing, typography, and layout stay the same. */
[data-theme="light"] {
   /* Light backgrounds */
   --color-bg-primary: #f5f5fa;
   --color-bg-secondary: #ffffff;
   --color-bg-tertiary: #e8e8f0;
   --color-bg-hover: #dddde8;

   /* Slightly deeper accents for contrast on light surfaces */
   --color-accent-primary: #0097a7;
   --color-accent-secondary: #d81b60;
   --color-accent-tertiary: #5e35b1;
   --color-accent-yellow: #f9a825;

   /* Accent transparencies (for glows, backgrounds) */
   --color-accent-primary-20: rgba(0, 151, 167, 0.15);
   --color-accent-primary-10: rgba(0, 151, 167, 0.08);
   --color-accent-secondary-20: rgba(216, 27, 96, 0.15);
   --color-accent-tertiary-20: rgba(94, 53, 177, 0.15);

   /* Dark text on light surfaces */
   --color-text-primary: #1a1a2e;
   --color-text-secondary: #4a4a66;
   --color-text-tertiary: #7a7a99;

   /* Borders */
   --color-border: rgba(0, 0, 0, 0.08);
   --color-border-hover: rgba(0, 0, 0, 0.15);

   /* Shadows (lighter) */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
   --shadow-glow-primary: 0 0 20px rgba(0, 151, 167, 0.2);
   --shadow-glow-secondary: 0 0 20px rgba(216, 27, 96, 0.2);
}