/* ═══════════════════════════════════════════════════════════════════
   client/src/styles/tokens.css
   Premium SaaS Design System
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Core Base Colors - Slate */
  --bg-color: #f8fafc;
  --text: #0f172a;
  --text-muted: #334155;
  --text-subtle: #64748b;
  
  /* Core UI Tokens */
  --border-color: #e2e8f0;
  --border-width: 1px;
  --shadow-offset: 0px;
  --shadow-color: transparent;
  
  /* Premium Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
  --shadow-primary: 0 8px 16px rgba(37, 99, 235, 0.15);
  --shadow-primary-hover: 0 12px 24px rgba(37, 99, 235, 0.25);

  /* Card and Panel Backgrounds */
  --card-bg: #ffffff;
  --card-bg-hover: #ffffff;
  
  /* Brand/Accent Colors (Vibrant SaaS Blue) */
  --primary: #2563eb; 
  --primary-hover: #1d4ed8;
  --primary-subtle: #eff6ff;
  --primary-ring: rgba(37, 99, 235, 0.2);

  /* Status Pastel Colors */
  --accent-red: #ef4444;     
  --accent-amber: #f59e0b;   
  --accent-green: #10b981;   
  --accent-blue: #3b82f6;    
  --accent-purple: #8b5cf6;  

  /* Neutral Tones */
  --surface-subtle: #f1f5f9;
  --surface-border: #cbd5e1;

  /* Radius — Premium Rounded */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

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

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace;

  /* Transitions */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-background: -10;
  --z-nav: 50;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}

[data-theme='dark'] {
  --bg-color: #020617;
  --text: #f8fafc;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;

  --card-bg: #0f172a;
  --card-bg-hover: #1e293b;

  --border-color: #1e293b;
  --shadow-color: transparent;

  /* Dark mode shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.6);

  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-subtle: #1e3a8a;
  --primary-ring: rgba(59, 130, 246, 0.3);

  --surface-subtle: #1e293b;
  --surface-border: #475569;

  /* Dark Mode Accents */
  --accent-red: #f87171;
  --accent-amber: #fbbf24;
  --accent-green: #34d399;
  --accent-blue: #60a5fa;
  --accent-purple: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════════════
   Design Styles overrides (Neubrutalist, Minimal, Glassmorphism, Cyberpunk)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Neubrutalist Override ────────────────────────────────────────── */
[data-style='neubrutalist'] {
  --bg-color: #faf9f6;
  --text: #000000;
  --text-muted: #262626;
  --text-subtle: #737373;
  --card-bg: #ffffff;
  --border-color: #000000;
  --border-width: 2px;
  --shadow-offset: 4px;
  --shadow-color: #000000;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-subtle: #dbeafe;
  --radius: 10px;
  --radius-lg: 12px;
}
[data-style='neubrutalist'][data-theme='dark'] {
  --bg-color: #121212;
  --text: #ffffff;
  --text-muted: #e5e5e5;
  --text-subtle: #a3a3a3;
  --card-bg: #1c1c1e;
  --border-color: #ffffff;
  --shadow-color: #ffffff;
  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --primary-subtle: #1e3a8a;
}

/* ── Minimal Override ──────────────────────────────────────────────── */
[data-style='minimal'] {
  --bg-color: #fafafa;
  --card-bg: #ffffff;
  --border-color: #e5e5e5;
  --border-width: 1px;
  --shadow-offset: 0px;
  --shadow-color: transparent;
  --primary: #171717;
  --primary-hover: #262626;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
}
[data-style='minimal'][data-theme='dark'] {
  --bg-color: #121212;
  --card-bg: #1c1c1e;
  --border-color: #2e2e2e;
  --text: #ffffff;
  --primary: #ffffff;
  --primary-hover: #e5e5e5;
}

/* ── Glassmorphism Override ────────────────────────────────────────── */
[data-style='glassmorphism'] {
  --bg-color: #0f172a;
  --text: #f8fafc;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;
  --card-bg: rgba(30, 41, 59, 0.45);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-width: 1px;
  --shadow-offset: 0px;
  --shadow-color: transparent;
  --primary: #38bdf8;
  --primary-hover: #0ea5e9;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ── Cyberpunk Override ────────────────────────────────────────────── */
[data-style='cyberpunk'] {
  --bg-color: #05050a;
  --text: #00ffcc;
  --text-muted: #ff0055;
  --text-subtle: #797c89;
  --card-bg: #0c0c14;
  --border-color: #ff0055;
  --border-width: 2px;
  --shadow-offset: 4px;
  --shadow-color: #00ffcc;
  --primary: #00ffcc;
  --primary-hover: #33ffdd;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}