/* ==============================================
   DESIGN SYSTEM VARIABLES — Single Source of Truth
   Merged: dayos.com exact + semantic aliases
   ============================================== */
:root {
    /* ---- Core Colors ---- */
    --black: #000000;
    --white: #ffffff;
    --light-grey: #e5e5e5;
    --section-grey: #f0f0f0;
    --hover-dark: #444444;
    --text-muted: #999999;
    --text-body: #444444;

    /* Accent */
    --color-primary: #4361ee;
    --color-muted: #999999; /* kept for Projects/Index.cshtml */

    /* ---- Typography ---- */
    --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 5rem;
    --fs-hero: 7rem;

    /* ---- Spacing ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;

    /* ---- Border Radius ---- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --radius-section: 62px;
    --radius-pill: 9999px;
    --radius-card: 24px;

    /* ---- Layout ---- */
    --container-max: 1400px;
    --container-padding: 48px;
    --header-height: 72px;

    /* ---- Transitions ---- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 200ms var(--ease-out-quart);
    --transition-smooth: 400ms var(--ease-out-expo);
    --transition-slow: 800ms var(--ease-out-expo);
    --transition-reveal: 1000ms var(--ease-out-expo);
    --transition-btn: all 0.3s ease-in-out;
}

/* Responsive scaling */
@media (max-width: 1024px) {
    :root {
        --fs-hero: 4rem;
        --fs-5xl: 3.5rem;
        --fs-4xl: 2.5rem;
        --container-padding: 24px;
        --radius-section: 40px;
    }
}

@media (max-width: 640px) {
    :root {
        --fs-hero: 2.75rem;
        --fs-5xl: 2.5rem;
        --fs-4xl: 2rem;
        --fs-3xl: 1.75rem;
        --container-padding: 16px;
        --radius-section: 24px;
    }
}