/**
 * Soonflow Design System
 * CSS Variables for Dark/Light Theme
 * Elite professional aesthetic
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  /* Light Theme */
  --bg-primary: #F8F7FB;
  --bg-secondary: #F1F0F6;
  --bg-tertiary: #E7E5F0;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover: #EEEAF6;

  --text-primary: #131225;
  --text-secondary: #4B4A63;
  --text-tertiary: #7B7A93;
  --text-inverse: #FFFFFF;

  /* Brand colors - aligned to Soonflow logo (rose primary + orange, restrained) */
  --accent-primary: #D85060;
  --accent-hover: #E0626F;
  --accent-light: rgba(216, 80, 96, 0.12);
  --accent-glow: rgba(216, 80, 96, 0.22);

  --accent-secondary: #FD8B54;
  --accent-tertiary: #FD8B54;
  --accent-pink: #C81579;

  --border-color: #E3E1EC;
  --border-subtle: #F0EDF7;

  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --error: #EF4444;
  --error-light: #FEE2E2;
  --info: #3B82F6;
  --info-light: #DBEAFE;

  --shadow-sm: 0 1px 2px rgba(15, 12, 40, 0.04), 0 0 0 1px rgba(15, 12, 40, 0.03);
  --shadow-md: 0 8px 18px rgba(15, 12, 40, 0.08);
  --shadow-lg: 0 18px 36px rgba(15, 12, 40, 0.12);
  --shadow-xl: 0 28px 60px rgba(15, 12, 40, 0.14);
  --shadow-glow: 0 0 24px var(--accent-glow);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --font-sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  --header-height: 64px;
  --sidebar-width: 260px;
}

[data-theme="dark"] {
  /* Dark Theme — warm purple-navy palette */
  --bg-primary:   #0F0E19;
  --bg-secondary: #151424;
  --bg-tertiary:  #1C1B2E;
  --bg-card:      #18172A;
  --bg-elevated:  #201F34;
  --bg-hover:     #272640;

  --text-primary:   #EEEDF5;
  --text-secondary: #A9A8C0;
  --text-tertiary:  #7A799A;
  --text-inverse:   #0F0E19;

  --accent-primary: #E45E69;
  --accent-hover: #F07B82;
  --accent-light: rgba(228, 94, 105, 0.2);
  --accent-glow: rgba(228, 94, 105, 0.4);

  --border-color:  #2C2B42;
  --border-subtle: #222138;

  --shadow-sm: 0 1px 3px rgba(5, 5, 20, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 8px 20px rgba(5, 5, 20, 0.5);
  --shadow-lg: 0 20px 40px rgba(5, 5, 20, 0.5);
  --shadow-xl: 0 30px 60px rgba(5, 5, 20, 0.55);

  /* Status colors — dark-appropriate translucent versions */
  --success-light: rgba(16, 185, 129, 0.15);
  --warning-light: rgba(245, 158, 11, 0.15);
  --error-light:   rgba(239, 68, 68, 0.15);
  --info-light:    rgba(59, 130, 246, 0.15);
}

/* Gradient definitions */
:root {
  --gradient-hero: linear-gradient(135deg, #C81579 0%, #FD8B54 100%);
  --gradient-hero-dark: linear-gradient(135deg, #D42D86 0%, #FD8B54 100%);
  --gradient-subtle: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  --gradient-glow: radial-gradient(ellipse at top, var(--accent-glow) 0%, transparent 50%);
  --gradient-brand: linear-gradient(135deg, #C81579 0%, #FD8B54 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #C81579 0%, #FD8B54 100%);
  --gradient-mesh:
    linear-gradient(120deg, rgba(200, 21, 121, 0.06) 0%, rgba(253, 139, 84, 0.06) 100%),
    radial-gradient(60% 50% at 20% 10%, rgba(200, 21, 121, 0.12) 0%, transparent 70%),
    radial-gradient(55% 45% at 85% 15%, rgba(253, 139, 84, 0.1) 0%, transparent 70%),
    radial-gradient(50% 50% at 70% 70%, rgba(200, 21, 121, 0.06) 0%, transparent 75%);
}

[data-theme="dark"] {
  --gradient-mesh:
    linear-gradient(120deg, rgba(200, 21, 121, 0.08) 0%, rgba(253, 139, 84, 0.08) 100%),
    radial-gradient(60% 50% at 20% 10%, rgba(200, 21, 121, 0.16) 0%, transparent 70%),
    radial-gradient(55% 45% at 85% 15%, rgba(253, 139, 84, 0.13) 0%, transparent 70%),
    radial-gradient(50% 50% at 70% 70%, rgba(200, 21, 121, 0.08) 0%, transparent 75%);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); }
}