/* ==========================================================================
   AstroAle — Design System
   Shared tokens + primitives used by every page. Page stylesheets consume
   these variables so the whole site reads as one coherent, premium product
   instead of a collection of differently-styled pages.
   ========================================================================== */

:root{
    /* ---- Surfaces -------------------------------------------------- */
    --bg: #000000;
    --bg-elevated: #0a0a0d;
    --bg-elevated-2: #111114;

    --surface-glass: rgba(255, 255, 255, .06);
    --surface-glass-strong: rgba(255, 255, 255, .10);
    --surface-glass-press: rgba(255, 255, 255, .14);

    --border-hairline: rgba(255, 255, 255, .10);
    --border-hairline-strong: rgba(255, 255, 255, .18);

    /* ---- Text -------------------------------------------------------- */
    --text-primary: rgba(255, 255, 255, .96);
    --text-secondary: rgba(255, 255, 255, .68);
    --text-tertiary: rgba(255, 255, 255, .46);
    --text-on-accent: #ffffff;

    /* ---- Accent (single source of truth for the whole site) ---------- */
    --accent: #0a84ff;
    --accent-strong: #409cff;
    --accent-dim: #0060c9;
    --accent-soft: rgba(10, 132, 255, .16);
    --accent-2: #32d74b; /* used sparingly: live/status accents only */

    /* Space backdrop, tuned to sit behind the blue accent */
    --space-bg: #000000;
    --space-nebula-1: rgba(94, 92, 230, .32);
    --space-nebula-2: rgba(10, 132, 255, .24);

    /* ---- Radii (Apple-style continuous corners) ----------------------- */
    --radius-s: 12px;
    --radius-m: 20px;
    --radius-l: 28px;
    --radius-xl: 36px;
    --radius-pill: 980px;

    /* ---- Shadows / elevation ------------------------------------------ */
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .24);
    --shadow-m: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-l: 0 24px 64px rgba(0, 0, 0, .5);
    --shadow-accent-glow: 0 12px 32px rgba(10, 132, 255, .28);

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

    /* ---- Motion --------------------------------------------------------- */
    --ease-apple: cubic-bezier(.22, .61, .18, 1);
    --dur-fast: .2s;
    --dur-base: .4s;
    --dur-slow: .7s;

    /* ---- Layout rhythm --------------------------------------------------- */
    --section-pad-y: clamp(72px, 11vw, 160px);
    --nav-h: 56px;
    color-scheme: dark;
}

*{
    box-sizing: border-box;
    border: 0;
}

::selection{
    background: var(--accent);
    color: var(--text-on-accent);
}

::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb{
    background: rgba(255, 255, 255, .18);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{
    background: rgba(255, 255, 255, .3);
    background-clip: content-box;
}

body{
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, button{
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-fast) var(--ease-apple),
        background-color var(--dur-fast) var(--ease-apple),
        border-color var(--dur-fast) var(--ease-apple),
        color var(--dur-fast) var(--ease-apple),
        box-shadow var(--dur-fast) var(--ease-apple),
        opacity var(--dur-fast) var(--ease-apple);
}

a:focus-visible, button:focus-visible{
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: var(--radius-s);
}

/* ---- Shared accent utility (replaces the old mismatched "orange"
   highlight color, which was green on one page and orange on another) --- */
.accent{
    color: var(--accent-strong);
}

/* ---- Glass navigation bar, shared shape/behaviour across every page --- */
.nav-glass{
    background: rgba(15, 15, 18, .55);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-s);
}

/* ---- Buttons: pill-shaped, glass by default, filled for primary CTAs --- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 590;
    letter-spacing: -.01em;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary{
    color: var(--text-on-accent);
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
    box-shadow: var(--shadow-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(10, 132, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.btn-primary:active{
    transform: translateY(0);
}

.btn-glass{
    color: var(--text-primary);
    background: var(--surface-glass);
    border-color: var(--border-hairline-strong);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.btn-glass:hover{
    background: var(--surface-glass-strong);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-2px);
}

.btn-glass:active{
    background: var(--surface-glass-press);
    transform: translateY(0);
}

/* ---- Eyebrow label used above headlines for a clear text hierarchy ---- */
.eyebrow{
    display: inline-flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-glass);
    border: 1px solid var(--border-hairline-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

/* ---- Mobile menu controls: pixel-precise CSS icons instead of Unicode
   glyphs, whose font metrics render off-center depending on the typeface --- */
.hamburger-btn{
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    padding: 0;
    cursor: pointer;
}

.hamburger-icon{
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}

.hamburger-icon::before,
.hamburger-icon::after{
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}

.hamburger-icon::before{ top: -6px; }
.hamburger-icon::after{ top: 6px; }

.sidenav .closebtn{
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-glass);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

.sidenav .closebtn:hover{
    background: var(--surface-glass-strong);
}

.sidenav .closebtn::before,
.sidenav .closebtn::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}

.sidenav .closebtn::before{ transform: rotate(45deg); }
.sidenav .closebtn::after{ transform: rotate(-45deg); }

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