/* * @orchard/theme — the PAPER system (2026-07 redesign). * * The warm-paper design language from the Cooper⊕Katie concept is now the * default and only lineage. The void brand packet (locked 2026-07-01) is * shelved for product surfaces; the old `orchard`/`jeff`/`warm` themes are * retired. Two polarities of one system: * * paper — warm paper light (DEFAULT) * paper-dark — the same system on warm black * * A theme is a set of semantic tokens + a type stack. Components reference * ONLY the contract — never a raw hex — so `` reskins * everything. Accent rules: * * --hl = the ONE loud color (approvals, GO LIVE, the yes-branch). * --hl-ink must stay readable ON --hl; the picker derives it * by luminance (theme-toggle.tsx accentInk + index.html). * User-swappable at runtime (Settings → Appearance). * base accent = text-safe on the theme's ground; *-2 = vivid (dots, bars, * glows). Do not put *-2 behind body text. * * Type: Archivo speaks · JetBrains Mono labels · DotGothic16 celebrates * (numerals — a 16px dot-matrix grid: the highest-fidelity retro face that * stays normal-width. Doto blurred decimals into pluses, Pixelify's 5 read * as an S, Press Start 2P was square and huge. Single weight; bolder * font-weight requests are harmless * only) · DM Sans is reserved for the wordmark. */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=DotGothic16&family=JetBrains+Mono:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,700&display=swap"); /* The numeral face, composed per glyph — DotGothic16 treats Latin punctuation as an afterthought (it's a Japanese font), so the offenders are donor-swapped via unicode-range, each choice measured by canvas raster, not vibes: · digits & everything else — DotGothic16 (16px grid, tall, unambiguous) · comma + full stop — Silkscreen: DotGothic's period ink sits 9.5px left of its 36px advance (decimals read glued to the digit); Silkscreen's pixel dot is dead centered. · percent — Jersey 25: DotGothic's % has zero left bearing and a smashed design; Silkscreen's is solid-filled blocks (rejected — "you filled in the percent"); Jersey 25 draws real HOLLOW rings with a thin diagonal and 2px bearing. Ranged faces are declared after the base so they win their ranges. */ @font-face { font-family: "Orchard Numeral"; src: url("https://fonts.gstatic.com/s/dotgothic16/v21/v6-QGYjBJFKgyw5nSoDAGH7M6X8.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Orchard Numeral"; src: url("https://fonts.gstatic.com/s/silkscreen/v6/m8JXjfVPf62XiF7kO-i9YLNlaw.woff2") format("woff2"); unicode-range: U+002C, U+002E; font-display: swap; } @font-face { font-family: "Orchard Numeral"; src: url("https://fonts.gstatic.com/s/jersey25/v4/ll8-K2eeXj2tAs6F9BX4IIoN.woff2") format("woff2"); unicode-range: U+0025; font-display: swap; } /* ============================================================ THEME: paper — warm paper light · DEFAULT ============================================================ */ :root, [data-theme="paper"] { /* Surfaces — page · card · floating pane · hover lift */ --surface: #e8e6e1; --surface-raised: #f7f6f3; --surface-panel: #ffffff; --surface-hover: #fdfcfa; /* Ink — three weights, and all three have to be READABLE. --ink-3 started at #8c877d: 3.3:1 on a raised tile, under WCAG AA at any size, and the app spends it on 8-10px mono labels. Both secondary weights moved twice — once to clear AA, then again because at AA they still read as background texture on a tile whose whole job is to be scanned. Now 7.8:1 / 6.3:1 on a panel, three ranks still clearly apart. Quiet is a rank, not a dare. */ --ink: #1c1a17; --ink-2: #55514a; --ink-3: #635f57; --line: rgba(28, 26, 23, 0.1); --line-strong: rgba(28, 26, 23, 0.18); /* Accents — base is text-safe on this ground, *-2 is vivid */ --signal: #c22b47; /* crimson — danger, needs-eyes, the only alarm */ --signal-2: #e63950; --signal-deep: #8f1430; --win: #2e9457; /* green — good / alive / saved */ --win-2: #4ebb72; --attention: #9a6a14; /* amber — opportunity / attention */ --attention-2: #f5a83c; --info: #2c7fb8; /* blue — routing / links */ --info-2: #4a82e8; --agent: #7a4de0; /* purple — the autonomous actor */ --agent-2: #8a5ce8; --data: var(--info); /* The one loud color. Overridden at runtime by the accent picker. */ --hl: #2e7d46; --hl-ink: #f2f8f4; /* Status semantics */ --online: #4ebb72; --online-dim: rgba(78, 187, 114, 0.16); --offline: #8c877d; --danger: var(--signal); --danger-bg: rgba(230, 57, 80, 0.1); /* Liquid glass / liquid metal */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-heavy: rgba(255, 255, 255, 0.78); --glass-border: rgba(28, 26, 23, 0.1); --glass-blur: 18px; /* The specular language: sheen = the diagonal top-light every raised surface catches; edge = the 1px white rim on glass; metal-ink = the brushed-metal fill for active/inverted chrome (tracks ink, so it flips polarity with the theme). */ --sheen: rgba(255, 255, 255, 0.5); --glass-edge: rgba(255, 255, 255, 0.65); --metal-ink: linear-gradient( 165deg, color-mix(in srgb, var(--ink) 78%, var(--surface)) 0%, var(--ink) 42%, color-mix(in srgb, var(--ink) 94%, var(--surface)) 68%, color-mix(in srgb, var(--ink) 68%, var(--surface)) 100% ); --metal: linear-gradient( 135deg, #fdfcfa 0%, #e5e2db 28%, #faf8f4 50%, #d8d4cb 72%, #f2f0eb 100% ); --shadow-soft: 0 1px 2px rgba(28, 26, 23, 0.06), 0 14px 40px rgba(28, 26, 23, 0.1); --shadow-deep: 0 2px 6px rgba(28, 26, 23, 0.08), 0 28px 80px rgba(28, 26, 23, 0.22); /* Type — Archivo speaks · Mono labels · DotGothic16 celebrates */ --font-display: "Archivo", system-ui, -apple-system, sans-serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Archivo", system-ui, sans-serif; /* no serif in the paper system */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-numeral: "Orchard Numeral", "DotGothic16", "JetBrains Mono", monospace; --font-wordmark: "DM Sans", "Archivo", sans-serif; color-scheme: light; } /* ============================================================ THEME: paper-dark — the same system on warm black ============================================================ */ [data-theme="paper-dark"] { --surface: #131210; --surface-raised: #1d1b18; --surface-panel: #24211d; --surface-hover: #2a2722; --ink: #efeae0; /* Mirrors the light polarity's second pass — see the note there. --ink-3 was #6f695e (3.2:1 on a raised tile, 2.9:1 on a panel); both weights now sit at 6.9:1 / 6.0:1 on a panel with the ranks intact. */ --ink-2: #b0aa96; --ink-3: #a49e8b; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --signal: #e63950; --signal-2: #ff7c90; --signal-deep: #a0182b; --win: #4ebb72; --win-2: #8fd0a2; --attention: #f5a83c; --attention-2: #ffcf95; --info: #7da9f0; --info-2: #9fc1ff; --agent: #b08af0; --agent-2: #c9aaff; --data: var(--info); --hl: #2e7d46; --hl-ink: #f2f8f4; --online: #4ebb72; --online-dim: rgba(78, 187, 114, 0.14); --offline: #6f695e; --danger: var(--signal); --danger-bg: rgba(230, 57, 80, 0.14); --glass-bg: rgba(29, 27, 24, 0.55); --glass-bg-heavy: rgba(29, 27, 24, 0.8); --glass-border: rgba(255, 255, 255, 0.12); --glass-blur: 18px; --sheen: rgba(255, 255, 255, 0.055); --glass-edge: rgba(255, 255, 255, 0.14); --metal-ink: linear-gradient( 165deg, color-mix(in srgb, var(--ink) 78%, var(--surface)) 0%, var(--ink) 42%, color-mix(in srgb, var(--ink) 94%, var(--surface)) 68%, color-mix(in srgb, var(--ink) 68%, var(--surface)) 100% ); --metal: linear-gradient( 135deg, #2b2925 0%, #17150f 30%, #34302a 52%, #121009 74%, #26231d 100% ); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px rgba(0, 0, 0, 0.45); --shadow-deep: 0 2px 6px rgba(0, 0, 0, 0.4), 0 28px 80px rgba(0, 0, 0, 0.65); --font-display: "Archivo", system-ui, -apple-system, sans-serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Archivo", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-numeral: "Orchard Numeral", "DotGothic16", "JetBrains Mono", monospace; --font-wordmark: "DM Sans", "Archivo", sans-serif; color-scheme: dark; } /* ============================================================ THEME: crt — P1 phosphor on a dead tube · ARCADE MODE Hidden until the Konami code is entered (src/shared/arcade.ts). Same contract, same token names; what makes it a tube rather than a third palette is .crt-tube, below. ============================================================ */ [data-theme="crt"] { --surface: #060c07; --surface-raised: #0a150b; --surface-panel: #0c1a0e; --surface-hover: #112310; /* Phosphor greens, held to the same three readable ranks as the paper polarities: 11.4:1 / 5.6:1 / 4.9:1 on a panel. Quiet is still a rank. */ --ink: #9dffb1; --ink-2: #52c66c; --ink-3: #429e57; --line: rgba(120, 255, 150, 0.14); --line-strong: rgba(120, 255, 150, 0.26); /* A colour arcade monitor, not a monochrome terminal: the semantic hues survive, pushed to the saturation a phosphor gun actually produced. A crit signal still has to be findable at 2am, which green-on-green everything would not be. */ --signal: #ff5f5f; --signal-2: #ff8a8a; --signal-deep: #b02323; --win: #57ff86; --win-2: #96ffb6; --attention: #ffc247; --attention-2: #ffdb92; --info: #5ad6ff; --info-2: #9be8ff; --agent: #c48cff; --agent-2: #dcbaff; --data: var(--info); /* No --hl here on purpose: the accent picker writes it as an inline property on , which beats every [data-theme] block, so anything set here would be dead code — and silently dropping the operator's chosen highlighter would make that control look broken in this theme. */ --online: #57ff86; --online-dim: rgba(87, 255, 134, 0.16); --offline: #3d6b47; --danger: var(--signal); --danger-bg: rgba(255, 95, 95, 0.16); --glass-bg: rgba(10, 26, 12, 0.6); --glass-bg-heavy: rgba(8, 20, 10, 0.85); --glass-border: rgba(120, 255, 150, 0.18); --glass-blur: 16px; --sheen: rgba(140, 255, 170, 0.06); --glass-edge: rgba(140, 255, 170, 0.2); --metal-ink: linear-gradient( 165deg, color-mix(in srgb, var(--ink) 78%, var(--surface)) 0%, var(--ink) 42%, color-mix(in srgb, var(--ink) 94%, var(--surface)) 68%, color-mix(in srgb, var(--ink) 68%, var(--surface)) 100% ); --metal: linear-gradient( 135deg, #133018 0%, #071a0c 30%, #1a3d22 52%, #05140a 74%, #102a15 100% ); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.6); --shadow-deep: 0 2px 6px rgba(0, 0, 0, 0.6), 0 28px 80px rgba(0, 0, 0, 0.8); --font-display: "Archivo", system-ui, -apple-system, sans-serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Archivo", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-numeral: "Orchard Numeral", "DotGothic16", "JetBrains Mono", monospace; --font-wordmark: "DM Sans", "Archivo", sans-serif; color-scheme: dark; } /* The glass in this theme is a curved piece of glass. Rendered by ThemeProvider as a real element rather than a pseudo-element: body::after and .nx::before are both already spoken for, and this has to cover portalled chrome (Isaac's dock, every modal) as well as the app itself. */ .crt-tube { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), radial-gradient(125% 105% at 50% 50%, transparent 54%, rgba(0, 0, 0, 0.55) 100%); box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), inset 0 0 180px rgba(0, 60, 20, 0.42); } /* The slow vertical roll of a tube that never quite locked. */ .crt-tube::after { content: ""; position: absolute; left: 0; right: 0; height: 110px; background: linear-gradient(180deg, transparent, rgba(150, 255, 180, 0.05) 45%, transparent); animation: crt-roll 8s linear infinite; } @keyframes crt-roll { from { top: -110px; } to { top: 100%; } } /* Bloom on the faces that carry data, not on body copy — the whole screen glowing is a blur; one rank of it is a monitor. */ [data-theme="crt"] .nx-word, [data-theme="crt"] .nx-alive { text-shadow: 0 0 7px currentColor; } @media (prefers-reduced-motion: reduce) { .crt-tube::after { animation: none; opacity: 0; } } /* ============================================================ BACK-COMPAT ALIASES Legacy variable names still referenced by classic call-sites. Values resolve dynamically from the active theme. Migrate call-sites to the contract, then delete this block. ============================================================ */ :root { --border: var(--line); --border-strong: var(--line-strong); --text: var(--ink); --text-dim: var(--ink-2); --text-faint: var(--ink-3); --brand-crimson: var(--signal); --brand-crimson-deep: var(--signal-deep); --brand-gold: var(--attention); /* gold is un-retired: ICE -> AMBER */ --brand-sage: var(--win); /* sage -> GREEN */ --mono: var(--font-mono); --sans: var(--font-sans); }