/**
 * CSS Variables - Design Tokens
 * The Heart of Gold
 */

:root {
    /* ==================== */
    /* Colors */
    /* ==================== */
    --color-black: #000000;
    --color-white: #ffffff;
    
    /* Pink Palette */
    --color-pink-dark: #c41e5c;
    --color-pink-main: #d64d7a;
    --color-pink-light: #e8789a;
    --color-pink-accent: #ffb3d9;
    --color-pink-pastel: #fca5ff;
    
    /* Purple Palette */
    --color-purple-deep: #14023b;
    --color-purple-dark: #170426;
    --color-purple-main: #2d1548;
    --color-purple-light: #813ce8;
    
    /* Semantic Colors */
    --color-bg-primary: var(--color-black);
    --color-bg-secondary: var(--color-purple-deep);
    --color-text-primary: var(--color-white);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    
    /* ==================== */
    /* Typography */
    /* ==================== */
    --font-title: 'TheGoldenHeart', Georgia, serif;
    --font-pixel: 'Pixeled', 'Courier New', monospace;
    --font-pixel-alt: 'Pixel', 'Courier New', monospace;
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes - Mobile First */
    --fs-xs: 0.65rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3rem;
    
    /* ==================== */
    /* Spacing */
    /* ==================== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* ==================== */
    /* Transitions */
    /* ==================== */
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    --transition-fast: 150ms var(--ease-in-out);
    --transition-normal: 300ms var(--ease-in-out);
    --transition-slow: 500ms var(--ease-out-expo);
    --transition-bounce: 400ms var(--ease-out-back);
    
    /* ==================== */
    /* Z-Index Scale */
    /* ==================== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-nav: 50;
    --z-overlay: 75;
    --z-loading: 100;
    --z-transition: 200;
    --z-splash: 300;
    --z-cursor: 9999;
    
    /* ==================== */
    /* Borders & Radius */
    /* ==================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    --border-thin: 1px solid;
    --border-medium: 2px solid;
    --border-thick: 3px solid;
    
    /* ==================== */
    /* Shadows */
    /* ==================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(196, 30, 92, 0.5);
    --shadow-glow-white: 0 0 15px rgba(255, 255, 255, 0.3);
    
    /* ==================== */
    /* Layout */
    /* ==================== */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1400px;
    
    /* Safe areas for mobile */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}