/* ============================================
   PSYCHE AI Tracker — Design System V2
   Inspired by wisprflow.ai — premium, alive feel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Primary Palette === */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  /* === Gradients === */
  --gradient-primary: linear-gradient(135deg, #06b6d4, #a855f7);
  --gradient-secondary: linear-gradient(135deg, #a855f7, #ec4899);
  --gradient-warm: linear-gradient(135deg, #f97316, #ef4444);
  --gradient-success: linear-gradient(135deg, #10b981, #06b6d4);
  --gradient-hero: linear-gradient(160deg, #0a0a1a 0%, #0d0d2b 30%, #1a0a2e 60%, #0a0a1a 100%);
  --gradient-text: linear-gradient(135deg, #22d3ee, #a855f7, #ec4899);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  --gradient-card-border: linear-gradient(135deg, rgba(6,182,212,0.3), rgba(168,85,247,0.3));
  --gradient-glow: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(6,182,212,0.06), transparent 40%);

  /* === Typography === */
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;

  /* === Spacing === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Borders & Radius === */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.15);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 40px -10px rgba(0,0,0,0.3);
  --shadow-2xl: 0 25px 60px -15px rgba(0,0,0,0.4);
  --shadow-glow-cyan: 0 0 30px rgba(6,182,212,0.3), 0 0 80px rgba(6,182,212,0.1);
  --shadow-glow-purple: 0 0 30px rgba(168,85,247,0.3), 0 0 80px rgba(168,85,247,0.1);
  --shadow-glow-primary: 0 0 30px rgba(6,182,212,0.2), 0 0 60px rgba(168,85,247,0.15);
  --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.05);

  /* === Transitions === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 800ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Z-Index === */
  --z-negative: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-max: 9999;

  /* === Layout === */
  --max-width: 1200px;
  --max-width-wide: 1400px;
  --nav-height: 72px;
}

/* ============================
   DARK THEME (Default)
   ============================ */
[data-theme="dark"] {
  --bg-primary: #050510;
  --bg-secondary: #0a0a1a;
  --bg-tertiary: #111128;
  --bg-card: rgba(12, 12, 30, 0.6);
  --bg-card-hover: rgba(20, 20, 45, 0.8);
  --bg-glass: rgba(10, 10, 25, 0.6);
  --bg-glass-strong: rgba(10, 10, 25, 0.85);

  --surface-1: #0c0c1e;
  --surface-2: #141430;
  --surface-3: #1e1e40;
  --surface-4: #2a2a55;

  --text-primary: #f0f0f8;
  --text-secondary: #9898b8;
  --text-tertiary: #606080;
  --text-inverse: #050510;

  --border-color: rgba(255, 255, 255, 0.06);
  --border-focus: rgba(6, 182, 212, 0.5);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-gradient: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(168,85,247,0.2));

  --nav-bg: rgba(5, 5, 16, 0.8);
  --nav-border: rgba(255, 255, 255, 0.04);

  --card-bg: rgba(12, 12, 30, 0.5);
  --card-border: rgba(255, 255, 255, 0.05);
  --card-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);

  --input-bg: rgba(20, 20, 45, 0.5);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-focus: rgba(6, 182, 212, 0.5);

  --scrollbar-track: #0a0a1a;
  --scrollbar-thumb: #1e1e40;
  --scrollbar-thumb-hover: #2a2a55;
}

/* ============================
   LIGHT THEME
   ============================ */
[data-theme="light"] {
  --bg-primary: #fafbff;
  --bg-secondary: #f0f2ff;
  --bg-tertiary: #e8ebf5;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.6);
  --bg-glass-strong: rgba(255, 255, 255, 0.85);

  --surface-1: #ffffff;
  --surface-2: #f5f6fa;
  --surface-3: #e5e7f0;
  --surface-4: #d0d3e0;

  --text-primary: #0a0a2e;
  --text-secondary: #4a4a70;
  --text-tertiary: #8585a5;
  --text-inverse: #f0f0f8;

  --border-color: rgba(0, 0, 0, 0.06);
  --border-focus: rgba(6, 182, 212, 0.5);
  --border-hover: rgba(0, 0, 0, 0.12);
  --border-gradient: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(168,85,247,0.15));

  --nav-bg: rgba(250, 251, 255, 0.85);
  --nav-border: rgba(0, 0, 0, 0.05);

  --card-bg: rgba(255, 255, 255, 0.7);
  --card-border: rgba(0, 0, 0, 0.05);
  --card-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);

  --input-bg: rgba(240, 242, 255, 0.7);
  --input-border: rgba(0, 0, 0, 0.08);
  --input-focus: rgba(6, 182, 212, 0.5);

  --scrollbar-track: #f0f2ff;
  --scrollbar-thumb: #d0d3e0;
  --scrollbar-thumb-hover: #b0b3c0;
}