/**
 * CSS Custom Properties (Variables)
 * Centralized design tokens for colors, spacing, shadows, transitions, and more
 */

:root {
    /* ========================================================================
       COLORS
       ======================================================================== */

    /* Primary color palette */
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;

    /* Text colors */
    --text-color: #0f172a;
    --text-secondary: #475569;

    /* Background colors */
    --light-color: #ffffff;
    --bg-color: #fafafa;
    --dark-color: #0f172a;

    /* ========================================================================
       SHADOWS
       ======================================================================== */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ========================================================================
       TRANSITIONS
       ======================================================================== */

    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */

    --border-radius: 1rem;
    --border-radius-lg: 1.5rem;
    --border-radius-xl: 2rem;

    /* ========================================================================
       SPACING SCALE
       ======================================================================== */

    --space-unit: 1rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;

    /* ========================================================================
       HEADER HEIGHTS
       ======================================================================== */

    --header-height-desktop: 70px;
    --header-height-tablet: 60px;
    --header-height-mobile: 50px;

    /* ========================================================================
       GRADIENTS
       ======================================================================== */

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    /* --gradient-hero-overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.85) 50%, rgba(15, 23, 42, 0.9) 100%);

    /* ========================================================================
       MISC
       ======================================================================== */

    color-scheme: light dark;
}