/**
 * =========================================================================
 * DESIGN TOKENS & TRENDY AESTHETIC THEME SYSTEM
 * =========================================================================
 * Theme 1 (Dark): Golden Hour Sunset Twilight & Midnight Obsidian
 *                 Accents: Warm Sunset Amber (#f59e0b), Electric Iris (#818cf8), Sunset Rose (#f43f5e)
 *                 Background: Golden sunset street lamp & cozy vinyl desk imagery
 *
 * Theme 2 (Light): Trendy Pastel Cherry Blossom & Sunset Peach
 *                  Accents: Blossom Rose (#ec4899), Sunset Peach (#f97316), Soft Lavender (#a855f7)
 *                  Background: Dreamy 3D pastel cherry blossom fairytale landscape
 */

:root {
  /* Default: Dark Theme - Neon Cyber Dusk & Deep Midnight Violet */
  --theme-name: 'dark';
  --bg-primary: #06021a;
  --bg-secondary: #0d0825;
  --bg-tertiary: #160e38;
  --bg-elevated: #1e1452;
  --bg-card: rgba(13, 8, 37, 0.78);
  --bg-card-hover: rgba(22, 14, 56, 0.92);

  /* Borders & Dividers */
  --border-subtle: rgba(168, 85, 247, 0.12);
  --border-card: rgba(168, 85, 247, 0.2);
  --border-hover: rgba(168, 85, 247, 0.55);
  --border-focus: #c084fc;

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;

  /* Trendy Accent Palette - Neon Cyber Violet */
  --accent-primary: #a855f7;           /* Neon Cyber Amethyst */
  --accent-primary-light: #c084fc;     /* Electric Lilac */
  --accent-primary-faint: rgba(168, 85, 247, 0.18);
  --accent-glow: rgba(168, 85, 247, 0.42);

  --accent-secondary: #7c3aed;         /* Deep Violet */
  --accent-secondary-faint: rgba(124, 58, 237, 0.18);

  --accent-warm: #e879f9;              /* Neon Fuchsia Glow */
  --accent-warm-light: #f0abfc;
  --accent-warm-faint: rgba(232, 121, 249, 0.16);

  --accent-rose: #f43f5e;              /* Hot Pink Pulse */
  --accent-rose-faint: rgba(244, 63, 94, 0.16);

  --accent-cyan: #06b6d4;              /* Ice Blue Glitch */
  --accent-cyan-faint: rgba(6, 182, 212, 0.14);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #e879f9 100%);
  --grad-warm: linear-gradient(135deg, #e879f9 0%, #a855f7 60%, #7c3aed 100%);
  --grad-surface: linear-gradient(180deg, rgba(168, 85, 247, 0.06) 0%, rgba(168, 85, 247, 0) 100%);
  --grad-hero-glow: radial-gradient(circle at 50% 10%, rgba(168, 85, 247, 0.32) 0%, rgba(232, 121, 249, 0.18) 40%, transparent 70%);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Containers */
  --container-max: 1200px;
  --container-narrow: 920px;
  --container-pad: clamp(1.2rem, 5vw, 2.5rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Glassmorphism */
  --glass-bg: rgba(16, 22, 38, 0.72);
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.12);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 10px 35px -5px rgba(99, 102, 241, 0.35);

  /* Transitions */
  --trans-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-negative: -1;
  --z-base: 1;
  --z-elevated: 10;
  --z-fixed: 50;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-cursor: 9999;
}

/* =========================================================================
   TRENDY LIGHT THEME: PASTEL CHERRY BLOSSOM & SUNSET PEACH
   ========================================================================= */
[data-theme="light"] {
  --theme-name: 'light';
  --bg-primary: #fff6f8;             /* Warm blush porcelain */
  --bg-secondary: #ffffff;
  --bg-tertiary: #fdf2f4;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.76);
  --bg-card-hover: rgba(255, 255, 255, 0.94);

  --border-subtle: rgba(236, 72, 153, 0.14);
  --border-card: rgba(236, 72, 153, 0.22);
  --border-hover: rgba(236, 72, 153, 0.55);
  --border-focus: #ec4899;

  /* Typography: Rich warm espresso-plum for supreme elegance & high contrast */
  --text-primary: #241424;
  --text-secondary: #4a2c47;
  --text-muted: #7e5578;
  --text-faint: #ac83a6;

  /* Trendy Pastel & Sunset Accents */
  --accent-primary: #ec4899;           /* Vibrant Cherry Blossom Pink */
  --accent-primary-light: #f472b6;     /* Soft Petal Pink */
  --accent-primary-faint: rgba(236, 72, 153, 0.14);
  --accent-glow: rgba(236, 72, 153, 0.32);

  --accent-secondary: #9333ea;         /* Dreamy Lilac / Lavender */
  --accent-secondary-faint: rgba(147, 51, 234, 0.12);

  --accent-warm: #f97316;              /* Sunset Peach / Tangerine */
  --accent-warm-light: #fb923c;
  --accent-warm-faint: rgba(249, 115, 22, 0.14);

  --accent-rose: #f43f5e;
  --accent-rose-faint: rgba(244, 63, 94, 0.14);

  --accent-cyan: #0284c7;
  --accent-cyan-faint: rgba(2, 132, 199, 0.12);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #f97316 100%);
  --grad-warm: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
  --grad-surface: linear-gradient(180deg, rgba(236, 72, 153, 0.04) 0%, rgba(236, 72, 153, 0) 100%);
  --grad-hero-glow: radial-gradient(circle at 50% 10%, rgba(244, 114, 182, 0.28) 0%, rgba(251, 146, 60, 0.16) 45%, transparent 70%);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: 1px solid rgba(236, 72, 153, 0.18);

  --shadow-sm: 0 2px 10px rgba(180, 83, 115, 0.08);
  --shadow-md: 0 10px 30px rgba(180, 83, 115, 0.12);
  --shadow-lg: 0 20px 50px rgba(180, 83, 115, 0.18);
  --shadow-accent: 0 10px 30px -5px rgba(236, 72, 153, 0.35);
}