/* ========================================
   Fonts (self-hosted variable fonts)
   ======================================== */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('assets/fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   Design Tokens
   ======================================== */
:root {
    /* Color System — overridden per-visit by a body.palette-N class (see palettes.css).
       These are the fallback values used before that class is assigned. */
    --bg-gradient: linear-gradient(135deg, hsl(226 55% 14%), hsl(248 60% 18%), hsl(270 55% 14%));
    --text-color: hsl(248 8% 94%);
    --accent-color: hsl(63 90% 60%);
    --on-accent: #14141a;
    --surface: rgba(255, 255, 255, 0.07);
    --surface-strong: rgba(255, 255, 255, 0.13);
    --border-soft: rgba(255, 255, 255, 0.16);

    /* Typography */
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --fs-display: clamp(2.75rem, 5vw + 1.25rem, 5.25rem);
    --fs-xl: clamp(1.375rem, 1.6vw + 1rem, 2.125rem);
    --fs-lg: clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
    --fs-base: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    --fs-sm: 0.875rem;
    --line-height-base: 1.55;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: 3.5rem;

    /* Shape */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    /* "Pop" shadow system — hard offset shadows instead of blurred glass.
       --shadow-pop-dark doesn't depend on the palette so it's safe to define here.
       --shadow-pop-accent is intentionally NOT defined on :root: custom properties
       inherit their already-computed value, not a live reference, so a var(--accent-color)
       baked in here would resolve against :root's own (fallback) accent and never
       update when body.palette-N overrides it further down. It's defined on `body`
       below instead, the same element that receives the palette override, so it
       recomputes correctly per palette. */
    --shadow-pop-dark: 6px 6px 0 0 rgba(0, 0, 0, 0.45);
    --shadow-pop-dark-sm: 3px 3px 0 0 rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* Motion */
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-bounce: 400ms;

    /* Z-Index Scale */
    --z-background: -1;
    --z-base: 1;
    --z-effects: 5;
    --z-header: 10;
    --z-modal: 100;
}

/* ========================================
   Base Styles & Reset
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background: var(--bg-gradient);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Defined here (not :root) so it recomputes correctly per palette — see note above. */
    --shadow-pop-accent: 6px 6px 0 0 var(--accent-color);
    --shadow-pop-accent-sm: 3px 3px 0 0 var(--accent-color);
}