/* ============================================================
   base.css — Reset, design tokens, typography
   ============================================================ */

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

:root {
    /* Brand */
    --brand-black:  #000;
    --brand-white:  #fff;
    --brand-accent: #4a8cff;   /* electric blue */
    --brand-accent-2: #2563d4; /* darker shade for gradient */
    --brand-accent-light: #8ab4ff;
    --brand-glow:   rgba(74, 140, 255, 0.55);

    /* Surface tokens — LIGHT theme (v1.0 style) */
    --ink:          #111;
    --ink-soft:     rgba(20, 20, 20, 0.72);
    --ink-muted:    rgba(20, 20, 20, 0.5);
    --ink-inverse:  #fff;

    /* Glass tokens — for light bg */
    --glass-bg:         rgba(255, 255, 255, 0.32);
    --glass-bg-strong:  rgba(255, 255, 255, 0.48);
    --glass-border:     rgba(255, 255, 255, 0.55);
    --glass-border-hi:  rgba(255, 255, 255, 0.75);
    --glass-blur:       28px;
    --glass-shadow:
        0 28px 60px -18px rgba(0, 0, 0, 0.32),
        0 10px 24px -10px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
    --glass-shadow-sm:
        0 10px 28px -10px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6);

    /* Radii */
    --r-sm:  10px;
    --r-md:  18px;
    --r-lg:  26px;
    --r-xl:  32px;
    --r-pill: 999px;

    /* Spacing */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

    /* Motion */
    --ease-out:  cubic-bezier(.2,.8,.2,1);
    --ease-in:   cubic-bezier(.6,.05,.8,.2);
    --ease-inout:cubic-bezier(.65,.05,.36,1);
    --t-fast:   180ms;
    --t-base:   320ms;
    --t-slow:   620ms;

    /* Z-layers */
    --z-fx:     0;
    --z-base:   1;
    --z-nav:    20;
    --z-modal:  50;
}

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: #e8e2d4; /* fallback colour — atmosphere.css overrides for .atmosphere */
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * Pre-atmosphere fallback: pages without .atmosphere body class still get
 * the clouds.jpg fixed background (no iOS Safari fixed-attachment bug).
 * The .atmosphere body class (set by Atmosphere::bodyClasses()) overrides
 * these layers entirely in atmosphere.css.
 */
body:not(.atmosphere)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/assets/backgrounds/clouds.jpg") center/cover no-repeat;
    z-index: -2;
    pointer-events: none;
}
body:not(.atmosphere)::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(60% 50% at 50% 60%, rgba(255, 220, 180, 0.28), transparent 75%),
        radial-gradient(50% 40% at 80% 15%, rgba(80, 150, 200, 0.16), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: rgba(74, 140, 255, 0.55); color: #fff; }

/* Accessibility helpers */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: #000;
    color: #fff;
    border-radius: var(--r-md);
    z-index: var(--z-modal);
}
.skip-link:focus { left: 16px; top: 16px; }

:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

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