/* ============================================================================
   Bremswerk — theme.css
   Design tokens + base chrome. Aesthetic: a race-engineer's data console —
   near-black "blueprint" ground, monospace data type, condensed uppercase
   labels, a single Guards-Red accent for the "hot" element. Derived from the
   Mirror project's palette, re-keyed to red. Vanilla CSS, no build step.
   ========================================================================= */

:root {
    /* ── Surfaces / ink ─────────────────────────────────────────────────── */
    --bg:         #080a0c;   /* page ground (cool near-black) */
    --surface-0:  #0f1318;   /* card base / inputs */
    --surface-1:  #12171d;   /* card gradient top / raised */
    --edge:       #1c242c;   /* borders */
    --grid:       rgba(140, 170, 180, .05);  /* blueprint hairlines */

    --ink:        #cdd8dc;   /* primary text */
    --ink-2:      #67767d;   /* secondary / muted */
    --ink-3:      #55626a;   /* faint / tertiary (raised for ≥3:1 contrast) */
    --ink-hi:     #eef3f5;   /* headline white */

    /* ── Accents ────────────────────────────────────────────────────────── */
    --accent:     #d5001c;   /* Guards Red — the signature "hot" accent */
    --accent-hi:  #e60a26;   /* hover */
    --gold:       #e3ab37;   /* crest gold — used sparingly (e.g. CSV badge) */
    --link:       #7fb2e6;   /* cool blue links */
    --ok:         #4ade80;
    --warn:       #f5a623;
    --err:        #ff5555;

    /* ── Type ───────────────────────────────────────────────────────────── */
    --cond: "IBM Plex Sans Condensed", system-ui, sans-serif;  /* display/labels */
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* body/data */

    /* ── Scale ──────────────────────────────────────────────────────────── */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --shadow: 0 18px 50px -22px rgba(0, 0, 0, .8);
    --wrap: 1180px;
}

/* ── Reset-ish ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Atmosphere: a soft red top-glow + cool secondary glow over the ground… */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1100px 560px at 50% -12%, rgba(213, 0, 28, .07), transparent 60%),
        radial-gradient(900px 520px at 85% 0%, rgba(140, 170, 180, .04), transparent 55%),
        var(--bg);
}
/* …and a faint blueprint grid, masked so it fades out toward the edges. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask: radial-gradient(circle at 50% 28%, #000 30%, transparent 92%);
            mask: radial-gradient(circle at 50% 28%, #000 30%, transparent 92%);
}

::selection { background: rgba(213, 0, 28, .32); color: #fff; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: var(--mono);
    font-size: .88em;
    color: var(--ink);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--edge);
    border-radius: 3px;
    padding: .08em .4em;
}

/* ── Layout helper ──────────────────────────────────────────────────────── */
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(2rem, 7vh, 4.5rem) clamp(1rem, 4vw, 2.4rem) 4rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--cond);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.1em;
    border: 1px solid var(--edge);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .03);
    color: var(--ink);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease,
                border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { border-color: #2a343d; background: rgba(255, 255, 255, .06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 6px 22px -8px rgba(213, 0, 28, .6);
}
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: 0 9px 26px -8px rgba(213, 0, 28, .75); }
.btn--ghost { background: transparent; }
.btn--lg { font-size: .92rem; padding: .8em 1.35em; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.rise   { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .20s; }
.rise-4 { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Scrollbar (webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1b2228; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #28323a; }