/* ============================================
   Workflowly — Design Tokens
   Single source of truth for colors, fonts, spacing
   ============================================ */

:root {
  /* Primary — deep navy/indigo for premium feel */
  --color-primary: #1E1B4B; /* Very Dark Indigo */
  --color-primary-dark: #0F172A; /* Slate 900 */
  --color-primary-light: #E0E7FF; /* Indigo 100 */
  --color-primary-50: #EEF2FF; /* Indigo 50 */

  /* Accent — vibrant royal blue for CTAs */
  --color-accent: #3B82F6; /* Blue 500 */
  --color-accent-dark: #2563EB; /* Blue 600 */
  --color-accent-light: #DBEAFE; /* Blue 100 */
  --logo-back: #2563EB; /* Logo v2 back stroke (light theme) */
  --logo-front: #1E1B4B; /* Logo v2 front stroke (light theme) */

  /* Neutrals */
  --color-bg: #FAFAFA; /* Off-white, slightly warmer than pure white */
  --color-bg-alt: #FFFFFF; /* Pure white for cards */
  --color-bg-dark: #0F172A; /* Dark Slate for footers/dark sections */
  --color-bg-dark-mid: #1E293B;
  
  --color-text: #0F172A; /* Slate 900 for high contrast readability */
  --color-text-mid: #475569; /* Slate 600 for secondary text */
  --color-text-light: #64748B; /* Slate 500 for tertiary text */
  --color-text-on-dark: #F8FAFC;
  --color-text-on-dark-mid: #94A3B8;
  
  --color-border: #E2E8F0; /* Subtle borders */
  --color-border-light: #F1F5F9;

  /* Glassmorphism & UI effects */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(16px);

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Premium Shadows (softer, more dispersed) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.025);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 10px 10px -5px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 20px 40px -5px rgba(15, 23, 42, 0.08); /* Deep shadow for hovered cards */

  /* Typography */
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Modern, geometric, friendly */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Highly legible */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem; /* Slightly larger base text for readability */
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: clamp(2.25rem, 5vw, 3rem);
  --text-5xl: clamp(2.75rem, 6vw, 4rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Spacing (8px base) */
  --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;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);
  --nav-height: 72px;

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

[data-theme="dark"] {
  --color-primary: #2563EB;
  --color-primary-dark: #1E40AF;
  --color-primary-light: #1D4ED8;
  --color-primary-50: #1E3A8A;

  --color-accent: #2563EB;
  --color-accent-dark: #1E40AF;
  --color-accent-light: #1D4ED8;
  --logo-back: #2563EB; /* Logo v4 back stroke (dark theme) */
  --logo-front: #FFFFFF; /* Logo v4 front stroke (dark theme) */

  --color-bg: #0B1220;
  --color-bg-alt: #111827;
  --color-bg-dark: #020617;
  --color-bg-dark-mid: #0F172A;

  --color-text: #E2E8F0;
  --color-text-mid: #CBD5E1;
  --color-text-light: #94A3B8;
  --color-text-on-dark: #F8FAFC;
  --color-text-on-dark-mid: #94A3B8;

  --color-border: #334155;
  --color-border-light: #1E293B;

  --glass-bg: rgba(15, 23, 42, 0.82);
  --glass-border: rgba(148, 163, 184, 0.24);
}