/* src/styles/variables.css — Design System */
:root {
  /* --- Primary: Deep Indigo --- */
  --color-primary-h: 236;
  --color-primary-s: 72%;
  --color-primary-l: 52%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h), 72%, 75%);
  --color-primary-dark: hsl(var(--color-primary-h), 72%, 32%);
  --color-on-primary: #ffffff;
  --color-primary-container: hsl(var(--color-primary-h), 90%, 93%);
  --color-on-primary-container: hsl(var(--color-primary-h), 72%, 18%);

  /* --- Secondary: Scientific Teal-Emerald --- */
  --color-secondary-h: 168;
  --color-secondary-s: 70%;
  --color-secondary-l: 40%;
  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
  --color-secondary-container: hsl(var(--color-secondary-h), 70%, 90%);
  --color-on-secondary-container: hsl(var(--color-secondary-h), 75%, 12%);

  /* --- Surfaces (Light) --- */
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-raised: #eef2f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f7fb;
  --color-surface-container: #edf1f7;
  --color-surface-container-high: #e5eaf2;
  --color-surface-translucent: rgba(255, 255, 255, 0.82);
  --color-border: rgba(15, 23, 42, 0.07);
  --color-border-strong: rgba(15, 23, 42, 0.14);

  /* --- Text --- */
  --color-text-main: #0f172a;
  --color-text-muted: #4a5568;
  --color-text-dim: #94a3b8;

  /* --- Status --- */
  --color-danger: #dc2626;
  --color-danger-container: #fee2e2;
  --color-success: #059669;
  --color-success-container: #d1fae5;
  --color-warning: #d97706;
  --color-warning-container: #fef3c7;

  /* --- Typography --- */
  --font-headers: 'Outfit', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  /* --- Spacing (8pt grid) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */

  /* --- Elevation Shadows (layered) --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 20px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-dock: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-premium: 0 12px 30px -8px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15);
  --shadow-glow: 0 0 20px -2px hsla(var(--color-secondary-h), 100%, 60%, 0.3);

  /* --- Playful & Accent Tokens --- */
  --color-accent-pink: hsl(330, 100%, 71%);
  --color-accent-cyan: hsl(185, 100%, 50%);
  --color-accent-emerald: hsl(150, 80%, 50%);

  /* --- Border Radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* --- Navigation --- */
  --dock-height: 88px;
  --nav-bar-height: 88px;

  /* --- Motion --- */
  --backdrop-blur: blur(20px);
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-emphasized: 400ms cubic-bezier(0.2, 0, 0, 1);
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --color-bg: #0a0f1a;
  --color-surface: #111827;
  --color-surface-raised: #1a2236;
  --color-surface-container-lowest: #07090f;
  --color-surface-container-low: #111827;
  --color-surface-container: #18202e;
  --color-surface-container-high: #1e2840;
  --color-surface-translucent: rgba(10, 15, 26, 0.88);
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.12);

  --color-text-main: #e2e8f4;
  --color-text-muted: #8896ae;
  --color-text-dim: #3d4a5c;

  --color-primary-l: 65%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-container: hsl(var(--color-primary-h), 55%, 22%);
  --color-on-primary-container: hsl(var(--color-primary-h), 80%, 88%);

  --color-secondary-l: 55%;
  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
  --color-secondary-container: hsl(var(--color-secondary-h), 45%, 20%);
  --color-on-secondary-container: hsl(var(--color-secondary-h), 65%, 82%);

  --color-danger-container: rgba(220, 38, 38, 0.18);
  --color-success-container: rgba(5, 150, 105, 0.15);
  --color-warning-container: rgba(217, 119, 6, 0.15);

  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-dock: 0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
}