/*
 * foxi.css — Foxi Labs shared stylesheet
 * Single source of truth for palette, fonts, reset, and base atmosphere.
 * Every page: <link rel="stylesheet" href="/foxi.css">
 */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=JetBrains+Mono:wght@300;400&display=swap');

/* ── PALETTE ─────────────────────────────────────────────────── */
:root {
    /* Steampunk */
    --soot:      #020101;
    --coal:      #0c0908;
    --iron:      #131010;
    --brass:     #c8913a;
    --copper:    #b87333;
    --amber:     #e8b84b;
    --steam:     #f0dfa0;
    --rust:      #a0391a;
    --verdigris: #00d450;
    --dim:       #6b5a3a;
    --edge:      rgba(200,145,58,0.18);
    --edge-hi:   rgba(200,145,58,0.45);

    /* Cyber accents */
    --cyber:        #4682a8;            /* midpoint of --verdigris + --aether */
    --aether:       #8b30ff;            /* electric purple — always glow */
    --aether-glow:  rgba(139,48,255,0.35);
    --saintsrow:    #5a1796;            /* deep royal purple — fills/surfaces */
}

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

/* ── BASE ────────────────────────────────────────────────────── */
html {
    height: 100%;
    background: var(--soot);
}

body {
    font-family: 'JetBrains Mono', monospace;
    color: var(--brass);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* grain texture removed — canvas static handles background texture */

/* vignette removed — soot background dark enough, was causing OLED colour banding */

/* ── SCANLINES ───────────────────────────────────────────────── */
.scanlines {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.12) 2px,
        rgba(0,0,0,0.12) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* ── SCROLLBARS ──────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dim) transparent;
}
*::-webkit-scrollbar       { width: 4px; }
*::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }