/* ═══════════════════════════════════════════════════════════════════════════
   XEARN — THE SHARED THEME SYSTEM

   ONE file. Every property loads it: the homepage, the app, the Composer,
   The Million. That is the point — "make it match the app" has to be
   structural, or it becomes a copy job that drifts the moment one page
   changes and the others don't.

   HOW TO USE IT

     <link rel="stylesheet" href="/theme.css">        (before your own CSS)

   Then style YOUR components against the tokens — never hardcode a colour:

     background: var(--bg);  color: var(--text);  border-color: var(--border);

   Switch with  ?theme=paper  on the URL, or set it yourself:

     document.documentElement.dataset.theme = 'lamp'   // '' means dark

   THE FIVE

     dark    default. the original console look.
     light   plain inverted.
     paper   hard edges, no shadow, small-caps labels. from the Composer.
     eink    warm ground, soft-black ink, desaturated colour, paper grain.
     lamp    black ground, amber phosphor terminal, static glow + scanlines.

   ⚠ NOTHING IN eink OR lamp MAY FLICKER, BLINK, PULSE OR SWEEP.
   A grid-wide flicker is a strobe, and this ships to someone who cannot
   safely look at one. The lamp scanlines are a FIXED gradient and the eink
   grain is a FIXED overlay, both on purpose. Do not "restore" motion here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DARK (default) ─────────────────────────────────────────────────────── */
:root {
  --bg: #050608;
  --panel: #0b0e12;
  --panel-2: #10141a;
  --panel-3: #151a21;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,94,0,.45);
  --text: #f6f7f9;
  --muted: #9299a5;
  --faint: #606773;
  --orange: #ff5a00;
  --orange-2: #ff7a1a;
  --green: #2bd576;
  --yellow: #ffb52e;
  --purple: #9a7cff;
  --blue: #55a7ff;
  --danger: #ff4d5e;
  --radius: 16px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --mono: 'Space Mono','SFMono-Regular',Menlo,Consolas,monospace;
}

/* ── LIGHT ──────────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  --bg:#f3f4f7; --panel:#ffffff; --panel-2:#eef0f4; --panel-3:#e5e8ee;
  --border:rgba(15,20,30,.12); --border-strong:rgba(255,94,0,.55);
  --text:#12151b; --muted:#5b626d; --faint:#8b929c;
  --green:#0f9e52; --shadow:0 14px 44px rgba(20,28,44,.12);
}

/* ── PAPER ──────────────────────────────────────────────────────────────────
   Three decisions, none of them colour:
     1. HARD EDGES. Zero radius, real rules. Panels share borders instead of
        floating, so a page reads as one sheet and not a pile of cards.
     2. NO SHADOWS. Depth is drawn with line weight.
     3. SMALL-CAPS LABELS, BIG CONTENT. That is what lets a dense screen feel
        calm.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="paper"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#FBF8F4;
  --panel-3:#f3f3f3;
  --border:#111111;
  --border-strong:#F97316;
  --text:#111111;
  --muted:#8a8a8a;
  --faint:#b0b0b0;
  --orange:#F97316;
  --orange-2:#ea6a05;
  --green:#2C7A4B;
  --yellow:#b8860b;
  --purple:#5b46b8;
  --blue:#1f5fbf;
  --danger:#c0392b;
  --radius:0px;
  --shadow:none;
}

/* ── E-INK ──────────────────────────────────────────────────────────────────
   Simulates an e-paper panel, for reading without eye strain. Not "paper but
   beige" — an e-ink panel is REFLECTIVE, not emissive, and four things follow:

     1. THE GROUND IS WARM AND NEVER PURE WHITE. #fff on a backlit screen is
        the glare. Real e-paper sits near #efede6.
     2. THE INK IS SOFT BLACK. E-ink cannot reach true black; it runs about
        12–14:1 against its ground where paper-on-black LCD is 19:1. This pair
        measures 14.7:1. The lower contrast is the comfort.
     3. COLOUR IS DESATURATED, NOT REMOVED. A colour e-paper panel keeps the
        hue and loses the saturation — orange stays orange, 4.3:1 on ground.
     4. NOTHING ANIMATES. The panel repaints slowly and ghosts, so motion is
        physically wrong here — and that makes this the calm, safe surface.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="eink"]{
  --bg:#efede6;
  --panel:#f4f2ec;
  --panel-2:#e8e5db;
  --panel-3:#ded9cd;
  --border:#3a3833;
  --border-strong:#b3541e;
  --text:#1c1b19;
  --muted:#6b6862;
  --faint:#96938b;
  --orange:#b3541e;
  --orange-2:#8f4116;
  --green:#2f6b45;
  --yellow:#7a6a35;
  --purple:#4a4459;
  --blue:#3a4a5e;
  --danger:#7a3b34;
  --radius:0px;
  --shadow:none;
}

/* ── LAMP ───────────────────────────────────────────────────────────────────
   Amber phosphor terminal. Black ground, monospace, soft static glow.
   #ffa94d on black is 11:1 — brighter than a real P3 phosphor on purpose,
   because the glow softens perceived edges and eats contrast.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="lamp"]{
  --bg:#000000;
  --panel:#080602;
  --panel-2:#0d0a04;
  --panel-3:#141005;
  --border:#4a3111;
  --border-strong:#ffa94d;
  --text:#ffa94d;
  --muted:#b3702a;
  --faint:#7a4c1c;
  --orange:#ffa94d;
  --orange-2:#ffc27a;
  --green:#7ad17a;
  --yellow:#ffd166;
  --purple:#c9a3ff;
  --blue:#7ab8ff;
  --danger:#ff6b4d;
  --radius:0px;
  --shadow:none;
}

/* ── MONO ────────────────────────────────────────────────────────────────────
   THE ONLY ALTERNATE MODE, AND THE APP IS THE ONLY PLACE IT RENDERS.

   Black ink on a WHITE ground — the cypherpunk file card, inverted. Three
   decisions carry it, and none of them is "the orange theme, brighter":

     1. IT IS MONOCHROME. Every accent token collapses to black or a grey.
        Orange is a mode, not a decoration — a component that needs emphasis
        here gets it from weight and rule, never from hue.
     2. NO GLOW, NO SHADOW. Ink on paper does not emit.
     3. HARD EDGES, SHARED RULES. Zero radius, real black lines — panels sit
        against each other like fields on a printed form.

   `orange` and `mono` are the only names theme.js will ever set. The four
   blocks above are kept because ~188 selectors in app/styles.css are still
   keyed to them; they are unreachable now and get folded into mono next.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="mono"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f4f4f4;
  --panel-3:#e9e9e9;
  --border:#000000;
  --border-strong:#000000;
  --text:#000000;
  --muted:#555555;
  --faint:#8a8a8a;
  --orange:#000000;
  --orange-2:#000000;
  --green:#000000;
  --yellow:#000000;
  --purple:#000000;
  --blue:#000000;
  --danger:#000000;
  --radius:0px;
  --shadow:none;
}

/* ═══ Structural rules that apply to any page, not just the console ═══════ */

/* Hard edges + no float, for the flat themes. One rule beats hunting every
   border-radius declaration on every property.
   ⚠ SCOPED ON PURPOSE. These must never apply to the default (orange) root —
   globalising them squares off every control on the homepage and puts a glow
   halo on the hero type. Add a theme to the list; do not drop the scope. */
:root[data-theme="mono"]  *, :root[data-theme="mono"]  *::before, :root[data-theme="mono"]  *::after,
:root[data-theme="paper"] *, :root[data-theme="paper"] *::before, :root[data-theme="paper"] *::after,
:root[data-theme="eink"]  *, :root[data-theme="eink"]  *::before, :root[data-theme="eink"]  *::after,
:root[data-theme="lamp"]  *, :root[data-theme="lamp"]  *::before, :root[data-theme="lamp"]  *::after{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* MONO is a printed surface: monospace throughout, nothing emits, nothing
   moves. This is what carries the terminal aesthetic across the inversion. */
:root[data-theme="mono"] body,
:root[data-theme="mono"] button,
:root[data-theme="mono"] input,
:root[data-theme="mono"] textarea,
:root[data-theme="mono"] select{
  font-family:var(--mono) !important; letter-spacing:.01em;
}
:root[data-theme="mono"] *,
:root[data-theme="mono"] *::before,
:root[data-theme="mono"] *::after{
  text-shadow:none !important;
  animation:none !important;
  transition:none !important;
}

/* E-ink and lamp are still surfaces. Nothing on them moves. */
:root[data-theme="eink"] *, :root[data-theme="eink"] *::before, :root[data-theme="eink"] *::after,
:root[data-theme="lamp"] *, :root[data-theme="lamp"] *::before, :root[data-theme="lamp"] *::after{
  animation:none !important;
  transition:none !important;
}

/* Paper grain — inline SVG turbulence, no asset fetch. Fixed, so it reads as
   the surface rather than something that scrolls over the page. */
:root[data-theme="eink"] body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lamp: terminal type, static glow, fixed scanlines. No sweep. No flicker. */
:root[data-theme="lamp"] body,
:root[data-theme="lamp"] button,
:root[data-theme="lamp"] input,
:root[data-theme="lamp"] textarea,
:root[data-theme="lamp"] select{
  font-family:var(--mono) !important; letter-spacing:.02em;
}
:root[data-theme="lamp"] h1, :root[data-theme="lamp"] h2, :root[data-theme="lamp"] h3{
  text-shadow:0 0 6px rgba(255,169,77,.45), 0 0 18px rgba(255,140,30,.18);
}
:root[data-theme="lamp"] body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.32) 2px, rgba(0,0,0,.32) 3px);
}

/* Anyone who asked their OS for less motion gets it everywhere, every theme. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ═══ Homepage: the app's language, applied to xearn.com/ ═══════════════════
   The page has its own long stylesheet. Rather than rewrite 2,000 lines, this
   maps its surfaces onto the shared tokens, so the homepage and the console
   move together when a token changes. Flat themes only — dark is untouched. */
:root[data-theme="paper"] body,
:root[data-theme="eink"]  body,
:root[data-theme="lamp"]  body{ background:var(--bg); color:var(--text); }

:root[data-theme="paper"] .nav, :root[data-theme="eink"] .nav, :root[data-theme="lamp"] .nav,
:root[data-theme="paper"] .corp-footer, :root[data-theme="eink"] .corp-footer, :root[data-theme="lamp"] .corp-footer{
  background:var(--panel); border-color:var(--border); color:var(--text); }

:root[data-theme="paper"] .chapter, :root[data-theme="eink"] .chapter, :root[data-theme="lamp"] .chapter,
:root[data-theme="paper"] .card,    :root[data-theme="eink"] .card,    :root[data-theme="lamp"] .card,
:root[data-theme="paper"] .panel,   :root[data-theme="eink"] .panel,   :root[data-theme="lamp"] .panel{
  background:var(--panel); border-color:var(--border); color:var(--text); }

/* small-caps labels — the thing that makes a dense page read calmly */
:root[data-theme="paper"] .kicker, :root[data-theme="eink"] .kicker, :root[data-theme="lamp"] .kicker,
:root[data-theme="paper"] .sys-line, :root[data-theme="eink"] .sys-line, :root[data-theme="lamp"] .sys-line{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }

:root[data-theme="paper"] .primary, :root[data-theme="eink"] .primary,
:root[data-theme="paper"] .btn.primary, :root[data-theme="eink"] .btn.primary{
  background:var(--orange); border:1.5px solid var(--orange); color:#111; }
:root[data-theme="lamp"] .primary, :root[data-theme="lamp"] .btn.primary{
  background:var(--orange); border:1px solid var(--orange); color:#000; text-shadow:none; }

/* the liquid canvas is the one piece of motion the homepage keeps, so on the
   still surfaces it holds its last frame rather than being hidden — the art
   survives, the movement doesn't. */
:root[data-theme="eink"] #heroCanvas, :root[data-theme="lamp"] #heroCanvas,
:root[data-theme="eink"] .tiger-canvas, :root[data-theme="lamp"] .tiger-canvas{
  opacity:.55; }