/* =========================
   Design Tokens
   ten Bruggencate Development
   ========================= */

:root {
    /* ---------- Colors ---------- */
    --color-primary: #fcb15c;
    --color-primary-hover: #f59e0b;
    --color-primary-glow: rgba(252, 177, 92, 0.35);
    --color-secondary: #7c3aed;
    --color-secondary-hover: #6d28d9;
    --color-secondary-glow: rgba(124, 58, 237, 0.25);
    --color-accent: #06b6d4;
    --color-text: #1a1a2e;
    --color-text-muted: #475569;
    --color-text-light: #fff;
    --color-details: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-dark: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.12);
    --color-bg-hover-glass: rgba(255, 255, 255, 0.06);
    --color-primary-bg-subtle: rgba(252, 177, 92, 0.1);
    --color-text-light-faint: rgba(255, 255, 255, 0.2);
    --color-slider-dot: rgba(255, 255, 255, 0.3);
    --color-surface-dark: #0a0a1a;
    --color-surface-alt: #f8fafc;
    --color-surface-white: #fff;
    --color-text-light-soft: rgba(255, 255, 255, 0.9);
    --color-text-light-muted: rgba(255, 255, 255, 0.85);
    --color-text-light-dim: rgba(255, 255, 255, 0.7);
    --color-status-available: #22c55e;
    --color-status-limited: #f59e0b;
    --color-status-unavailable: #ef4444;
    --color-link: var(--color-details);
    --color-link-hover: var(--color-primary);

    /* ---------- Gradients ---------- */
    --gradient-primary: linear-gradient(135deg, #fcb15c, #f97316);
    --gradient-hero: linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(10, 10, 26, 0.88));
    --gradient-hero-animated: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.82),
        rgba(10, 10, 26, 0.88),
        rgba(6, 182, 212, 0.45)
    );
    --gradient-section: linear-gradient(135deg, #7c3aed, #4f46e5);

    /* ---------- Glass Effect ---------- */
    --glass-bg: rgba(10, 10, 26, 0.72);
    --glass-bg-heavy: rgba(10, 10, 26, 0.92);
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);

    /* ---------- Typography ---------- */
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* Type scale */
    --text-xs: 0.8rem;     /* 12.8px */
    --text-sm: 0.889rem;   /* 14.2px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */

    --leading-tight: 1.1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.8;

    /* ---------- Spacing (8px base) ---------- */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px */
    --space-6: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */
    --space-12: 6rem;    /* 96px */
    --space-16: 8rem;    /* 128px */

    --section-padding-y: var(--space-8);

    /* ---------- Borders & Radii ---------- */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 30px var(--color-primary-glow);
    --shadow-glow-sm: 0 0 16px var(--color-primary-glow);
    --shadow-glow-purple: 0 0 30px var(--color-secondary-glow);
    --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.25);
    --shadow-navbar: 0 4px 30px rgba(0, 0, 0, 0.15);
    --shadow-text: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-text-sm: 0 1px 8px rgba(0, 0, 0, 0.2);
    --shadow-focus-primary: 0 0 0 3px rgba(252, 177, 92, 0.15);
    --shadow-focus-secondary: 0 0 0 3px rgba(124, 58, 237, 0.15);

    /* ---------- Color Scales ---------- */
    --color-primary-50: #fff8ed;
    --color-primary-100: #ffefd4;
    --color-primary-200: #ffdba8;
    --color-primary-300: #fcc171;
    --color-primary-400: #fcb15c;
    --color-primary-500: #f59e0b;
    --color-primary-600: #d97706;
    --color-primary-700: #b45309;
    --color-primary-800: #92400e;
    --color-primary-900: #78350f;

    --color-secondary-50: #f5f3ff;
    --color-secondary-100: #ede9fe;
    --color-secondary-200: #ddd6fe;
    --color-secondary-300: #c4b5fd;
    --color-secondary-400: #a78bfa;
    --color-secondary-500: #7c3aed;
    --color-secondary-600: #6d28d9;
    --color-secondary-700: #5b21b6;
    --color-secondary-800: #4c1d95;
    --color-secondary-900: #3b0764;

    /* ---------- Colored Shadows ---------- */
    --shadow-primary-sm: 0 2px 8px rgba(252, 177, 92, 0.15);
    --shadow-primary-md: 0 8px 24px rgba(252, 177, 92, 0.20);
    --shadow-primary-lg: 0 16px 48px rgba(252, 177, 92, 0.25);
    --shadow-secondary-sm: 0 2px 8px rgba(124, 58, 237, 0.15);
    --shadow-secondary-md: 0 8px 24px rgba(124, 58, 237, 0.20);
    --shadow-secondary-lg: 0 16px 48px rgba(124, 58, 237, 0.25);

    /* ---------- Elevation Shadows (multi-layer) ---------- */
    --shadow-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --shadow-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.02);

    /* ---------- Subtle Gradients ---------- */
    --gradient-surface-warm: linear-gradient(180deg, #fff 0%, #fffbf5 100%);
    --gradient-surface-cool: linear-gradient(180deg, #fff 0%, #f8f7ff 100%);
    --gradient-radial-glow: radial-gradient(ellipse at 50% 0%, rgba(252, 177, 92, 0.08) 0%, transparent 70%);
    --gradient-radial-purple: radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    --gradient-border: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
    --gradient-divider: linear-gradient(90deg, transparent 0%, var(--color-primary) 20%, var(--color-primary) 80%, transparent 100%);
    --gradient-text-premium: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-rainbow-accent: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);

    /* ---------- Noise Texture ---------- */
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* ---------- Transitions ---------- */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ---------- Premium Easing ---------- */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}