/**
 * Trip2Where "Golden Hour" Design Tokens
 * Version: 1.0.0
 * 
 * Implements HSL-based dynamic color system, glassmorphism vars, 
 * and modern typography settings.
 */

:root {
    /* =========================================
       1. Core Brand Colors (HSL)
       ========================================= */
    /* Primary: Sunset Gold (#FFB700) */
    --t2w-primary-h: 43;
    --t2w-primary-s: 100%;
    --t2w-primary-l: 50%;
    --t2w-primary: hsl(var(--t2w-primary-h), var(--t2w-primary-s), var(--t2w-primary-l));
    
    /* Secondary: Deep Ocean (#1E3A5F) */
    --t2w-secondary-h: 214;
    --t2w-secondary-s: 52%;
    --t2w-secondary-l: 25%;
    --t2w-secondary: hsl(var(--t2w-secondary-h), var(--t2w-secondary-s), var(--t2w-secondary-l));

    /* Accent: Coral Reef (#E85A4F) */
    --t2w-accent-h: 3;
    --t2w-accent-s: 79%;
    --t2w-accent-l: 61%;
    --t2w-accent: hsl(var(--t2w-accent-h), var(--t2w-accent-s), var(--t2w-accent-l));

    /* Neutral / Surface */
    --t2w-surface-h: 0;
    --t2w-surface-s: 0%;
    --t2w-surface-l: 100%;
    --t2w-surface: hsl(var(--t2w-surface-h), var(--t2w-surface-s), var(--t2w-surface-l));

    /* =========================================
       2. Semantic Colors (Derived)
       ========================================= */
    /* Backgrounds */
    --t2w-bg-page: #F8FAFC;
    --t2w-bg-glass: hsla(var(--t2w-surface-h), var(--t2w-surface-s), var(--t2w-surface-l), 0.7);
    --t2w-bg-glass-dark: hsla(214, 52%, 10%, 0.8);

    /* Text */
    --t2w-text-main: var(--t2w-secondary);
    --t2w-text-muted: hsla(214, 20%, 50%, 1);
    --t2w-text-inverse: #FFFFFF;

    /* Gradients */
    --t2w-gradient-primary: linear-gradient(135deg, hsl(43, 100%, 53%) 0%, hsl(35, 100%, 50%) 100%);
    --t2w-gradient-ocean: linear-gradient(180deg, rgba(30,58,95,0) 0%, rgba(30,58,95,0.8) 100%);

    /* =========================================
       3. Effects (Glassmorphism & Shadows)
       ========================================= */
    --t2w-glass-blur: blur(12px);
    --t2w-glass-border: 1px solid rgba(255, 255, 255, 0.4);
    
    --t2w-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --t2w-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --t2w-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --t2w-shadow-glow: 0 0 20px hsla(var(--t2w-primary-h), 100%, 50%, 0.3);

    /* =========================================
       4. Typography
       ========================================= */
    --t2w-font-heading: 'Outfit', 'Pretendard', sans-serif;
    --t2w-font-body: 'Inter', 'Pretendard', sans-serif;

    /* =========================================
       5. Spacing & Radius
       ========================================= */
    --t2w-radius-sm: 8px;
    --t2w-radius-md: 16px;
    --t2w-radius-lg: 24px;
    --t2w-radius-pill: 9999px;
}

/* Base Overrides */
body {
    background-color: var(--t2w-bg-page);
    color: var(--t2w-text-main);
    font-family: var(--t2w-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--t2w-font-heading);
    font-weight: 700;
    color: var(--t2w-secondary);
}