/* ═══════════════════════════════════════════════════════════════════════════ fire.css — the /enter look for every page outside the app: sign-in, registration, verification codes, and the legal pages linked from them. The tokens are the ones in /enter (public/landing.html) and in the app's body[data-look="fire"] layer (src/index.css), so the door, the sign-up and the room are one design. Load this LAST in : at equal specificity the later rule wins, so it re-points each page's own variables and plain element styles without having to touch the page's classes. ═══════════════════════════════════════════════════════════════════════════ */ :root { --void:#03040a; --void-2:#070918; --ink:#e9f2ff; --dim:#8a93b8; --cyan:#6fc4ff; --violet:#8c6fff; --earth:#38e8c8; --rose:#ff8fcf; --ember:#ff9c4a; --ember-hot:#ffd27a; --ember-deep:#c8531b; --green:#22c55e; --red:#ef4444; --amber:#fbbf24; --glass:rgba(16,22,44,.42); --glass-strong:rgba(14,19,40,.72); --glass-solid:rgba(12,17,34,.86); --hair:rgba(140,170,255,.16); --hair-2:rgba(140,170,255,.30); --disp:"Space Grotesk",-apple-system,system-ui,sans-serif; --body:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --mono:"DM Mono","SF Mono",Menlo,monospace; /* the vocabulary login.html and register.html already speak */ --bg-primary: var(--void); --bg-secondary: var(--void-2); --bg-card: var(--glass-strong); --border-subtle: var(--hair); --border-glow: rgba(255,156,74,.30); --text-primary: var(--ink); --text-secondary: #b9c1e0; --text-muted: var(--dim); --accent: var(--ember); --accent-glow: rgba(255,156,74,.25); --accent-2: var(--ember-hot); --accent-3: var(--violet); --success: var(--green); --danger: var(--red); --warning: var(--amber); --glass-bg: var(--glass); --glass-border: var(--hair); --glass-highlight: rgba(140,170,255,.08); } html { background-color: var(--void); } body { background: radial-gradient(140% 90% at 50% 22%, rgba(80,40,15,.24) 0%, transparent 44%), radial-gradient(120% 60% at 50% 0%, rgba(200,83,27,.16) 0%, transparent 55%), radial-gradient(90% 70% at 15% 4%, rgba(60,50,130,.20) 0%, transparent 55%), linear-gradient(180deg, var(--void-2) 0%, var(--void) 40%, #010109 100%); background-attachment: fixed; color: var(--text-secondary); font-family: var(--body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--disp); color: var(--ink); letter-spacing: -0.01em; } h2 { border-bottom-color: var(--hair); } a { color: var(--ember); } a:hover { color: var(--ember-hot); } input, textarea, select, button { font-family: var(--body); } code, pre, kbd, samp { font-family: var(--mono); } ::selection { background: rgba(255,156,74,.28); color: var(--ink); } /* verification and sign-in codes read as a code */ input[inputmode="numeric"], input[autocomplete="one-time-code"], #code-input, #verify-code, #twofa-code, #reset-code { font-family: var(--mono); letter-spacing: 0.3em; } /* the legal pages' fixed text colours */ .date, .back { color: var(--dim); }