/* studio — trivvy's own theme: a Saturday-night answer board. Structure lives in tokens.css; this file is colour, type and shape. ── Direction ───────────────────────────────────────────────────────── THESIS: every answer is a panel waiting to flip; the reveal is the show. The arrangement this refuses is the classroom-quiz default — a saturated purple ground with four coloured shape tiles — and the product-dashboard shell trivvy scaffolded on. OWN-WORLD: a 1970s–90s electromechanical game-show board. Midnight- blue studio drape as the ground; cream card panels that read as physical objects sitting on it; one incandescent amber for whatever is lit right now — the correct panel, the primary action, a bulb in the chase rail. Text on the drape is warm cream, never white: the set is lit by tungsten, not daylight. Corners are 6px, the radius of a die-cut card; shadows are a real drop with blur, a panel standing a few millimetres off the drape. MODE: experience. The dark scheme is the show and the default a TV in a lamp-lit living room resolves to. The light scheme is the same set with the house lights up — the host's set-management pages — and is authored, not inverted: cream stock as the ground, ink-blue text, the amber deepened to a burnt orange that clears AA on cream. RISK, stated: "dark plus one warm accent" is a well-worn look. What earns this its own ground is the material logic — cream panels on a dark drape, incandescent rather than neon, segment digits rather than a sans clock — enforced in trivvy.css. If a screen ends up with amber in four places, the theme is being used against its grain. FINISH: every pair below is measured and gated by the app's theme test (internal/trivvytest/theme_test.go). ── Contrast, dark (default show) ───────────────────────────────────── pair ratio needs --rst-text on --rst-surface 13.45 4.5:1 text --rst-text on --rst-bg 15.02 4.5:1 text --rst-text on --rst-surface-2 14.42 4.5:1 text --rst-text on --rst-accent-soft 12.63 4.5:1 text --rst-text-muted on --rst-surface 9.54 4.5:1 text --rst-text-muted on --rst-bg 10.66 4.5:1 text --rst-text-muted on --rst-surface-2 10.24 4.5:1 text --rst-text-muted on --rst-accent-soft 8.97 4.5:1 text --rst-text-faint on --rst-surface 7.16 4.5:1 text --rst-text-faint on --rst-bg 8.00 4.5:1 text --rst-text-faint on --rst-surface-2 7.69 4.5:1 text --rst-text-faint on --rst-accent-soft 6.73 4.5:1 text --rst-accent on --rst-surface 9.25 4.5:1 text + focus ring --rst-accent on --rst-bg 10.33 4.5:1 text + focus ring --rst-accent on --rst-surface-2 9.92 4.5:1 text --rst-accent on --rst-accent-soft 8.69 4.5:1 text --rst-on-accent on --rst-accent 10.43 4.5:1 button label --rst-on-accent on --rst-accent-strong 12.15 4.5:1 button label, hover --rst-line-strong on --rst-surface 5.61 3:1 control border --rst-line-strong on --rst-bg 6.26 3:1 control border --rst-line-strong on --rst-surface-2 6.01 3:1 control border positive fg on positive bg 9.29 4.5:1 pill warning fg on warning bg 10.96 4.5:1 pill negative fg on negative bg 8.27 4.5:1 pill neutral fg on neutral bg 8.89 4.5:1 pill --rst-on-accent on negative fg (fill) 9.28 4.5:1 danger button label ── Contrast, light (house lights up) ───────────────────────────────── --rst-text on --rst-surface 16.30 4.5:1 text --rst-text on --rst-bg 14.19 4.5:1 text --rst-text on --rst-surface-2 13.17 4.5:1 text --rst-text on --rst-accent-soft 13.95 4.5:1 text --rst-text-muted on --rst-surface 8.95 4.5:1 text --rst-text-muted on --rst-bg 7.79 4.5:1 text --rst-text-muted on --rst-surface-2 7.24 4.5:1 text --rst-text-muted on --rst-accent-soft 7.67 4.5:1 text --rst-text-faint on --rst-surface 6.38 4.5:1 text --rst-text-faint on --rst-bg 5.55 4.5:1 text --rst-text-faint on --rst-surface-2 5.16 4.5:1 text --rst-text-faint on --rst-accent-soft 5.46 4.5:1 text --rst-accent on --rst-surface 6.54 4.5:1 text + focus ring --rst-accent on --rst-bg 5.69 4.5:1 text + focus ring --rst-accent on --rst-surface-2 5.29 4.5:1 text --rst-accent on --rst-accent-soft 5.60 4.5:1 text --rst-on-accent on --rst-accent 6.80 4.5:1 button label --rst-on-accent on --rst-accent-strong 10.77 4.5:1 button label, hover --rst-line-strong on --rst-surface 5.72 3:1 control border --rst-line-strong on --rst-bg 4.98 3:1 control border --rst-line-strong on --rst-surface-2 4.63 3:1 control border positive fg on positive bg 6.38 4.5:1 pill warning fg on warning bg 6.79 4.5:1 pill negative fg on negative bg 6.03 4.5:1 pill neutral fg on neutral bg 7.28 4.5:1 pill --rst-on-accent on negative fg (fill) 7.77 4.5:1 danger button label */ @font-face { font-family: "League Gothic"; src: url("fonts/LeagueGothic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "DSEG7"; src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; } :root { /* The show is dark. A TV in a lamp-lit room should not glare; the host's laptop follows the OS. */ color-scheme: dark light; /* Type: the body is a workhorse humanist sans (the board's printed labels); display work is League Gothic via trivvy.css. */ --rst-font: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, ui-sans-serif, system-ui, sans-serif; /* Shape: die-cut card. */ --rst-radius: 6px; --rst-radius-sm: 3px; --rst-radius-pill: 999px; /* Drape and card. Dark: midnight blue, panels a shade lighter. Light: cream stock, panels whiter. */ --rst-bg: light-dark(#f3ead8, #0b1230); --rst-surface: light-dark(#fffaf0, #131c44); --rst-surface-2: light-dark(#ece2cc, #0e1638); --rst-line: light-dark(#d5c9ad, #2b3670); --rst-line-strong: light-dark(#6b6350, #8a94c9); --rst-header-rule: color-mix(in oklab, var(--rst-accent) 55%, var(--rst-line)); /* Text: tungsten-lit cream on the drape; ink-blue on the stock. */ --rst-text: light-dark(#141a3a, #f7e7c3); --rst-text-muted: light-dark(#3f4566, #cfc5a6); --rst-text-faint: light-dark(#555b7a, #b3ab91); /* Accent: one incandescent amber. It is whatever is lit right now. */ --rst-accent: light-dark(#8a4b00, #ffb428); --rst-accent-strong: light-dark(#5e3300, #ffc95c); --rst-accent-soft: light-dark(#fbe7bf, #2a2412); --rst-on-accent: light-dark(#ffffff, #1a1204); /* Status tones: warm-shifted so they sit under the same lamps. */ --rst-tone-neutral-fg: light-dark(#3b4160, #c9cfe8); --rst-tone-neutral-bg: light-dark(#e4dcc7, #20295a); --rst-tone-positive-fg: light-dark(#0d5f3a, #5fe0a0); --rst-tone-positive-bg: light-dark(#d7efe1, #0b2a1c); --rst-tone-warning-fg: light-dark(#6d4300, #ffcf6b); --rst-tone-warning-bg: light-dark(#f8e3b5, #2b2008); --rst-tone-negative-fg: light-dark(#a5121c, #ff9d95); --rst-tone-negative-bg: light-dark(#f9dcdc, #33161a); /* Depth: a card a few millimetres off the drape. Real offset, real blur, no halo. */ --rst-shadow-pop: 0 10px 24px light-dark(rgba(40, 30, 10, 0.22), rgba(0, 0, 0, 0.55)); --rst-shadow-knob: 0 2px 4px light-dark(rgba(40, 30, 10, 0.35), rgba(0, 0, 0, 0.6)); --rst-shadow-lift: 0 3px 8px light-dark(rgba(40, 30, 10, 0.18), rgba(0, 0, 0, 0.45)); --rst-overlay: light-dark(rgba(20, 26, 58, 0.5), rgba(3, 5, 14, 0.75)); /* trivvy's own: the panel stock and the four letter tabs. The tabs are the one place four hues exist; each always carries its letter. */ --tv-card: light-dark(#fffaf0, #f7e7c3); --tv-card-ink: #141a3a; --tv-card-edge: light-dark(#d5c9ad, #cbb98e); --tv-card-down: light-dark(#cfc3a6, #253064); --tv-tab-a: #c8352b; --tv-tab-b: #2457c5; --tv-tab-c: #d99a00; --tv-tab-d: #1b7a43; --tv-bulb: #ffb428; --tv-bulb-off: light-dark(#cbb98e, #2b3670); --tv-led: #ff4a3a; --tv-led-ghost: light-dark(rgba(20, 26, 58, 0.10), rgba(255, 74, 58, 0.16)); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }