/*
 * Shared theme for the app and the content pages: the Remy retrofuture language (warm earthy
 * pastels, copper as the only metal, Jost / Nunito Sans / Space Mono). Day theme by default,
 * night when the OS asks for dark. Brights never colour text and pastels never carry it: state is
 * shown with lamps and rims, plus a word.
 */

@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('vendor/fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url('vendor/fonts/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-display: swap; src: url('vendor/fonts/jost-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url('vendor/fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('vendor/fonts/nunito-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-display: swap; src: url('vendor/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url('vendor/fonts/space-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url('vendor/fonts/space-mono-latin-700-normal.woff2') format('woff2'); }

/* ---------- Tokens: day (default) ---------- */

:root {
    --ground: #F0E7D6;
    --ground-sunk: #E6D9C2;
    --surface: #FBF5E9;
    --ink: #2A2018;
    --ink-muted: #6A5B4C;
    --ink-faint: #9A8974;
    --celadon: #9FC3B4;
    --rose: #DFA694;
    --sage: #B5C69A;
    --wheat: #EFD7A1;
    --burnt: #CE6630;
    --burnt-deep: #A8471E;
    --poppy: #BE4331;
    --mustard: #D6A128;
    --turquoise: #2F8A8A;
    --copper: #B4743A;
    --copper-hi: #E0A368;
    --copper-lo: #7C4B22;
    --on-act: var(--surface);
    --link: #276F6F;
    --shadow: rgba(42, 32, 24, 0.10);

    --font-display: 'Jost', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --tracking: 0.12em;
    --shape-capsule: 999px;
    --shape-lozenge: 48px 16px 48px 16px;
    --shape-arc: 50% 50% 0 0 / 44px 44px 0 0;
    --shape-instrument: 6px;
    --dur-state: 180ms;
    --ease-sprung: cubic-bezier(.34, 1.2, .4, 1);
    --grain-opacity: 0.05;
    color-scheme: light;
}

/* ---------- Tokens: night ---------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #221A14;
        --ground-sunk: #191310;
        --surface: #2C231B;
        --ink: #F2E7D6;
        --ink-muted: #B6A48E;
        --ink-faint: #8A7763;
        --celadon: #6F9487;
        --rose: #B37E6D;
        --sage: #86976E;
        --wheat: #BFA372;
        --burnt: #E07C42;
        --burnt-deep: #AD4A20;
        --poppy: #D45A46;
        --mustard: #E0B34A;
        --turquoise: #49A3A3;
        --copper: #C98A4E;
        --copper-hi: #F0BC85;
        --copper-lo: #8A5628;
        --on-act: var(--ink);
        --link: #5DB5B5;
        --shadow: rgba(0, 0, 0, 0.35);
        --grain-opacity: 0.06;
        color-scheme: dark;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-state: 0ms; }
    *, *::before, *::after { animation: none !important; }
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--ground); }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

/* Film grain on the ground layer, behind everything; never on a text container. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
}

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--burnt);
    outline-offset: 2px;
}

/* ---------- Copper rim: a gradient border that follows any radius ---------- */

.rim {
    --fill: var(--surface);
    --rim-hi: var(--copper-hi);
    --rim-mid: var(--copper);
    --rim-lo: var(--copper-lo);
    border: var(--rim-width, 2px) solid transparent;
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--rim-hi), var(--rim-mid) 50%, var(--rim-lo)) border-box;
}

/* ---------- Capsule buttons: copper rimmed, with mechanical travel ---------- */

.btn,
.cta {
    --fill: var(--surface);
    --rim-hi: var(--copper-hi);
    --rim-mid: var(--copper);
    --rim-lo: var(--copper-lo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 1.25rem;
    border: var(--rim-width, 2px) solid transparent;
    border-radius: var(--shape-capsule);
    background:
        linear-gradient(var(--fill), var(--fill)) padding-box,
        linear-gradient(180deg, var(--rim-hi), var(--rim-mid) 50%, var(--rim-lo)) border-box;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--copper-lo), 0 6px 16px var(--shadow);
    transition: transform var(--dur-state) linear, box-shadow var(--dur-state) linear;
}

/* Lit, not recoloured: a hover must not look like an act. */
.btn:not(:disabled):hover,
.cta:hover {
    --fill: var(--ground);
    --rim-mid: var(--copper-hi);
    color: var(--ink);
}

/* The press: 2px down, the underside collapses, the highlight dims. */
.btn:not(:disabled):active,
.cta:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--copper-lo);
    --fill: var(--ground-sunk);
    --rim-hi: var(--copper);
}

/* --burnt-deep is the one "act" fill. */
.btn-act:not(:disabled),
.cta {
    --fill: var(--burnt-deep);
    color: var(--on-act);
}
.btn-act:not(:disabled):hover,
.btn-act:not(:disabled):active,
.cta:hover,
.cta:active {
    --fill: var(--burnt-deep);
    color: var(--on-act);
    box-shadow: 0 2px 0 var(--copper-lo), 0 6px 16px var(--shadow), 0 0 0 3px var(--copper-hi);
}

.btn:disabled {
    --fill: var(--ground-sunk);
    --rim-hi: var(--ink-faint);
    --rim-mid: var(--ink-faint);
    --rim-lo: var(--ink-faint);
    color: var(--ink-faint);
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- Lamp: a copper bezel around a lens ---------- */

.lamp {
    --lens: var(--ground-sunk);
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lens-hi, transparent) 0 18%, var(--lens) 60%);
    box-shadow: inset 0 1px 0 var(--copper-hi), 0 0 var(--glow, 0) var(--lens);
    vertical-align: -1px;
}
.lamp-ok { --lens: var(--celadon); --lens-hi: var(--surface); --glow: 8px; }
.lamp-attention { --lens: var(--mustard); --lens-hi: var(--surface); --glow: 8px; }
.lamp-alarm { --lens: var(--poppy); --lens-hi: var(--surface); --glow: 8px; }