/**
 * Valentine's Day Boilerplate - Design Tokens & CSS Variables
 * ============================================================
 * A comprehensive theming system for romantic-themed applications
 *
 * Usage: Import this file first, then use variables throughout your CSS
 * Customize by overriding these variables in your own stylesheet
 */

:root {
  /* =============================================
     COLOR PALETTE - ROMANTIC THEME
     ============================================= */

  /* Primary Colors */
  --vday-red: #C41E3A;
  --vday-red-light: #E63950;
  --vday-red-dark: #9A1830;
  --vday-red-rgb: 196, 30, 58;

  /* Secondary Colors */
  --vday-pink: #FFB6C1;
  --vday-pink-light: #FFD4DC;
  --vday-pink-dark: #FF8FA0;
  --vday-pink-rgb: 255, 182, 193;

  /* Accent Colors */
  --vday-rose-gold: #B76E79;
  --vday-rose-gold-light: #D4959E;
  --vday-rose-gold-dark: #8F4F58;

  /* Neutral Colors */
  --vday-wine: #722F37;
  --vday-burgundy: #4A1C23;
  --vday-blush: #FFF0F5;
  --vday-cream: #FFFEF0;
  --vday-white: #FFFFFF;
  --vday-black: #1A0A0C;

  /* Semantic Colors */
  --vday-success: #4CAF50;
  --vday-warning: #FFB74D;
  --vday-error: #F44336;
  --vday-info: #64B5F6;

  /* =============================================
     GRADIENTS
     ============================================= */
  --gradient-romantic: linear-gradient(135deg, var(--vday-red) 0%, var(--vday-rose-gold) 100%);
  --gradient-sunset: linear-gradient(180deg, var(--vday-blush) 0%, var(--vday-pink) 50%, var(--vday-red) 100%);
  --gradient-blush: linear-gradient(135deg, var(--vday-pink) 0%, var(--vday-blush) 100%);
  --gradient-wine: linear-gradient(135deg, var(--vday-wine) 0%, var(--vday-red) 100%);
  --gradient-dreamy: linear-gradient(135deg, rgba(255,240,245,0.9) 0%, rgba(255,182,193,0.7) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(183,110,121,0.3) 50%, transparent 100%);
  --gradient-glow: radial-gradient(circle, rgba(255,182,193,0.4) 0%, transparent 70%);

  /* =============================================
     TYPOGRAPHY
     ============================================= */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;

  /* Font Sizes - Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(3rem, 2.5rem + 3vw, 4.5rem);
  --text-hero: clamp(3.5rem, 3rem + 4vw, 6rem);

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* =============================================
     SPACING SCALE
     ============================================= */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* =============================================
     LAYOUT
     ============================================= */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* =============================================
     BORDERS & RADIUS
     ============================================= */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  --radius-heart: 50% 50% 50% 50% / 60% 60% 40% 40%;

  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;

  /* =============================================
     SHADOWS
     ============================================= */
  --shadow-sm: 0 1px 2px rgba(var(--vday-red-rgb), 0.05);
  --shadow-md: 0 4px 6px rgba(var(--vday-red-rgb), 0.1);
  --shadow-lg: 0 10px 15px rgba(var(--vday-red-rgb), 0.15);
  --shadow-xl: 0 20px 25px rgba(var(--vday-red-rgb), 0.2);
  --shadow-2xl: 0 25px 50px rgba(var(--vday-red-rgb), 0.25);
  --shadow-glow: 0 0 30px rgba(var(--vday-pink-rgb), 0.4);
  --shadow-glow-strong: 0 0 60px rgba(var(--vday-pink-rgb), 0.6);
  --shadow-inner: inset 0 2px 4px rgba(var(--vday-red-rgb), 0.1);

  /* =============================================
     TRANSITIONS & ANIMATIONS
     ============================================= */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  --transition-colors: color var(--duration-normal) var(--ease-in-out),
                       background-color var(--duration-normal) var(--ease-in-out),
                       border-color var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);

  /* =============================================
     Z-INDEX SCALE
     ============================================= */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* =============================================
     GLASS MORPHISM
     ============================================= */
  --glass-bg: rgba(255, 240, 245, 0.7);
  --glass-bg-dark: rgba(114, 47, 55, 0.7);
  --glass-border: rgba(255, 182, 193, 0.3);
  --glass-blur: blur(20px);
}

/* Dark Theme Override */
[data-theme="dark"] {
  --vday-blush: #2D1A1E;
  --vday-cream: #1A1410;
  --vday-white: #1A0A0C;
  --vday-black: #FFF0F5;
  --glass-bg: rgba(45, 26, 30, 0.8);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --vday-red: #B00020;
    --vday-pink: #FFD0D6;
    --shadow-glow: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}