/* ─── Arlberg Proposal — Design System ─────────────────────────── */

:root {
    /* Colors — Dark alpine theme */
    --color-bg:          #0B0F14;
    --color-bg-alt:      #111820;
    --color-bg-card:     #161E28;
    --color-bg-card-hover: #1C2636;
    --color-surface:     #1A2332;
    --color-text:        #E8ECF1;
    --color-text-muted:  #8898AA;
    --color-text-dim:    #5A6B80;
    --color-heading:     #FFFFFF;
    --color-accent:      #3B9EFF;
    --color-accent-dim:  #1A6FD4;
    --color-accent-glow: rgba(59, 158, 255, 0.15);
    --color-border:      rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.12);
    --color-success:     #34D399;
    --color-warm:        #F59E0B;
    --color-snow:        #E0F0FF;

    /* Typography */
    --font-heading:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:     'DM Mono', 'Fira Code', monospace;

    --text-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm:   clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg:   clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
    --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-3xl:  clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
    --text-4xl:  clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
    --text-hero: clamp(2.8rem, 1.8rem + 5vw, 5.5rem);

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
    --section-pad:   clamp(4rem, 8vw, 8rem);

    /* Motion */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   0.3s;
    --dur-base:   0.5s;
    --dur-slow:   0.8s;

    /* Border radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
}

/* ─── Light Mode ──────────────────────────────────────────────────── */

body.theme-light {
    --color-bg:          #F5F6F8;
    --color-bg-alt:      #EBEDF0;
    --color-bg-card:     #FFFFFF;
    --color-bg-card-hover: #F8F9FA;
    --color-surface:     #FFFFFF;
    --color-text:        #3A4250;
    --color-text-muted:  #6B7A8D;
    --color-text-dim:    #9AA5B4;
    --color-heading:     #1A1F28;
    --color-accent:      #2563EB;
    --color-accent-dim:  #1D4ED8;
    --color-accent-glow: rgba(37, 99, 235, 0.08);
    --color-border:      rgba(0, 0, 0, 0.08);
    --color-border-light: rgba(0, 0, 0, 0.12);
    --color-success:     #059669;
    --color-warm:        #D97706;
    --color-snow:        #EFF6FF;
}

body.theme-light a:hover { color: #1D4ED8; }

/* ─── Reset ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto; /* Lenis handles this */
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: #69B4FF; }

/* ─── Typography ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-hero); font-weight: 800; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--color-heading); }

/* ─── Layout ──────────────────────────────────────────────────────── */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* ─── Accessibility ───────────────────────────────────────────────── */

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}