/* ================================================
   PREP WORKSPACE — SHARED DESIGN TOKENS
   All CSS custom properties used across the app
   ================================================ */

:root {
  /* Brand Colors */
  --color-primary: #5a189a;
  --color-secondary: #ffc300;
  --color-dark-purple: #3c096c;
  
  /* Text Colors */
  --color-text: #333333;
  --color-soft-gray: #6b7280;
  --color-light-gray: #e5e7eb;
  
  /* Status Colors */
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  
  /* Background Colors */
  --bg-body: #f4f7f9;
  --bg-glass-panel: rgba(255, 255, 255, 0.55);
  --bg-glass-card: rgba(255, 255, 255, 0.6);
  --bg-input: rgba(255, 255, 255, 0.8);
  --color-card-background: #ffffff;
  --paper-bg: #ffffff;
  --paper-text: #1a1a1a;
  
  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.7);
  --border-color: rgba(192, 192, 192, 0.5);
  
  /* Shadows */
  --shadow-glass: 0 8px 32px rgba(90, 24, 154, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 16px rgba(90, 24, 154, 0.08), 0 1px 4px rgba(0,0,0,0.04);
  
  /* Effects */
  --glass-blur: blur(18px) saturate(180%);
  
  /* Typography */
  --font-main: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo: 'Montserrat', sans-serif;
  --font-family-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-family-logo: 'Montserrat', sans-serif;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --border-radius-lg: 20px;
  --border-radius-pill: 50px;
  
  /* Layout */
  --sidebar-width: 320px;
  
  /* Ambient Background Gradient */
  --ambient-gradient:
    radial-gradient(ellipse at 15% 10%,  rgba(90,24,154,0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%,  rgba(255,195,0,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 30%,  rgba(79,172,254,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 70%,  rgba(90,24,154,0.12) 0%, transparent 40%);
  
  /* Legacy aliases (for compatibility during migration) */
  --color-background: var(--bg-body);
  --color-primary-color: var(--color-primary);
  --color-secondary-color: var(--color-secondary);
}

/* ================================================
   DARK MODE OVERRIDES
   ================================================ */
[data-theme="dark"],
body.dark,
body.dark-mode {
  /* Background Colors */
  --bg-body: #050505;
  --bg-glass-panel: rgba(15, 10, 25, 0.65);
  --bg-glass-card: rgba(20, 15, 35, 0.6);
  --bg-input: rgba(30, 25, 45, 0.75);
  --color-card-background: #141414;
  --paper-bg: #141414;
  --paper-text: #ffffff;
  
  /* Text Colors */
  --color-text: #ffffff;
  --color-soft-gray: #a3a3a3;
  
  /* Brand Colors (adjusted for dark mode) */
  --color-secondary: #ffd60a;
  
  /* Borders */
  --border-glass: rgba(90, 24, 154, 0.35);
  --border-color: rgba(90, 24, 154, 0.3);
  
  /* Shadows */
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(90,24,154,0.15);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

/* ================================================
   UNIVERSAL RESET
   ================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ================================================
   BASE STYLES
   ================================================ */
body {
  font-family: var(--font-main);
  background: var(--bg-body);
  color: var(--color-text);
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
}

/* Ambient gradient background — shared across all pages */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--ambient-gradient);
  pointer-events: none;
  z-index: 0;
}