/* ================================================================
   FILE: css/variables.css
   ================================================================ */

:root {
    /* Color Palette - Construction Theme: Slate + Gray + Orange */
    --color-bg: 40, 15%, 96%;
    --color-surface: 0, 0%, 100%;
    --color-surface-alt: 40, 10%, 92%;

    --color-text: 215, 25%, 15%;
    --color-text-muted: 215, 15%, 40%;

    --color-accent: 24, 95%, 55%;
    --color-accent-hover: 24, 95%, 45%;

    --color-border: 215, 15%, 85%;

    /* Typography */
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;

    /* Fluid Typography */
    --text-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8vw + 0.7rem, 1rem);
    --text-base: clamp(1rem, 1vw + 0.8rem, 1.125rem);
    --text-lg: clamp(1.125rem, 1.5vw + 0.9rem, 1.5rem);
    --text-xl: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    --text-2xl: clamp(2rem, 4vw + 1.2rem, 3.5rem);
    --text-3xl: clamp(2.5rem, 6vw + 1.5rem, 5rem);
    --text-hero: clamp(3rem, 10vw + 1rem, 8rem);

    /* Spacing */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(1rem, 2vw, 1.5rem);
    --space-md: clamp(1.5rem, 3vw, 2.5rem);
    --space-lg: clamp(2.5rem, 5vw, 4rem);
    --space-xl: clamp(4rem, 8vw, 8rem);

    /* Layout */
    --container-width: min(90%, 1200px);
    --header-height: 80px;

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}