/* ═══════════════════════════════════════════════════════════════ sithear-tokens.css — the sit hear design-token engine (M3, rev1) Neumorphic base × Teenage Engineering control logic × warm tint. HOW THEMES WORK (the finesse layer — edit knobs, never components): A theme is one block of knobs: a tint trio (hue/sat/lightness), surface hi/lo lightness for the dual shadows, ink lightnesses, and an accent pair. Every semantic token derives from the knobs. Component CSS references ONLY semantic tokens — switching data-theme on reskins the whole app, zero component edits. Themes (from Justin's TE color-overlay mockups, 20260712): cream — TX-6 cream (default) bronze — warm bronze-brown overlay moss — OP-XY deep green Accent stays TE-orange everywhere; it marks record/active ONLY and never carries text (keeps AA independent of accent choice). rev1 (20260712): texture, bezel edge-light system, LCD tokens (fixed light LCD across all themes, like real TE hardware), speaker-grille dot, knurl ring for the theme dial. ═══════════════════════════════════════════════════════════════ */ /* ── theme knobs ── */ :root, [data-theme="cream"] { --tint-h: 40; --tint-s: 26; --surface-l: 88; --hi-l: 95; --lo-l: 74; --ink-l: 15; --ink-soft-l: 37; --accent-h: 16; --accent-s: 87; --accent-l: 54; /* shadow geometry + weight knobs (rev5) — dark themes override for the OP-Z read: shorter offset, longer blur, deep smooth slope, bright top catch-light, thinner type. Nothing floats. */ --sh-off: 6px; --sh-blur: 14px; --sh-hi-c: var(--surface-hi); --sh-lo-c: var(--surface-lo); --fw-heavy: 700; --fw-strong: 600; --texture: var(--grain-dark); /* dark grain on light body */ /* light LCD on the light theme */ --lcd-bg: hsl(90 8% 88%); --lcd-ink: hsl(90 6% 14%); --lcd-soft: hsl(90 5% 36%); --lcd-grid: hsl(90 8% 82%); } [data-theme="bronze"] { --tint-h: 24; --tint-s: 14; --surface-l: 22; --hi-l: 28; --lo-l: 12; --ink-l: 93; --ink-soft-l: 74; --accent-h: 16; --accent-s: 87; --accent-l: 58; /* grounded OP-Z shadows: shallow offset, gradual slope, deep smooth dark */ --sh-off: 3px; --sh-blur: 22px; --sh-hi-c: color-mix(in srgb, var(--surface-hi) 45%, transparent); --sh-lo-c: color-mix(in srgb, black 55%, var(--surface-lo)); --bezel-hi: color-mix(in srgb, hsl(0 0% 100%) 22%, transparent); /* top catch-light */ --fw-heavy: 500; --fw-strong: 400; /* thin weights */ --texture: var(--grain-light); /* light grain on dark body */ /* inverted LCD: black glass, illuminated elements (rev2) */ --lcd-bg: hsl(90 8% 7%); --lcd-ink: hsl(90 22% 82%); --lcd-soft: hsl(90 10% 62%); --lcd-grid: hsl(90 6% 15%); } [data-theme="moss"] { --tint-h: 150; --tint-s: 10; --surface-l: 17; --hi-l: 23; --lo-l: 8; --ink-l: 93; --ink-soft-l: 72; --accent-h: 16; --accent-s: 87; --accent-l: 58; --sh-off: 3px; --sh-blur: 22px; --sh-hi-c: color-mix(in srgb, var(--surface-hi) 45%, transparent); --sh-lo-c: color-mix(in srgb, black 55%, var(--surface-lo)); --bezel-hi: color-mix(in srgb, hsl(0 0% 100%) 22%, transparent); --fw-heavy: 500; --fw-strong: 400; --texture: var(--grain-light); --lcd-bg: hsl(90 8% 7%); --lcd-ink: hsl(90 22% 82%); --lcd-soft: hsl(90 10% 62%); --lcd-grid: hsl(90 6% 15%); } /* ── derived semantic tokens (do not theme these directly) ── */ :root, [data-theme] { --surface: hsl(var(--tint-h) calc(var(--tint-s) * 1%) calc(var(--surface-l) * 1%)); --surface-hi: hsl(var(--tint-h) calc(var(--tint-s) * 1%) calc(var(--hi-l) * 1%)); --surface-lo: hsl(var(--tint-h) calc(var(--tint-s) * 1%) calc(var(--lo-l) * 1%)); --ink: hsl(var(--tint-h) 12% calc(var(--ink-l) * 1%)); --ink-soft: hsl(var(--tint-h) 10% calc(var(--ink-soft-l) * 1%)); --accent: hsl(var(--accent-h) calc(var(--accent-s) * 1%) calc(var(--accent-l) * 1%)); --focus: var(--ink); /* radii — squircle scale */ --r-hairline: 1px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --r-round: 50%; /* dual-shadow system — the neumorphic core (knob-driven since rev5) */ --shadow-out: calc(-1 * var(--sh-off)) calc(-1 * var(--sh-off)) var(--sh-blur) var(--sh-hi-c), var(--sh-off) var(--sh-off) var(--sh-blur) var(--sh-lo-c); --shadow-out-sm: calc(var(--sh-off) / -2) calc(var(--sh-off) / -2) calc(var(--sh-blur) / 2) var(--sh-hi-c), calc(var(--sh-off) / 2) calc(var(--sh-off) / 2) calc(var(--sh-blur) / 2) var(--sh-lo-c); --shadow-in: inset calc(var(--sh-off) / -1.5) calc(var(--sh-off) / -1.5) calc(var(--sh-blur) / 1.4) var(--sh-hi-c), inset calc(var(--sh-off) / 1.5) calc(var(--sh-off) / 1.5) calc(var(--sh-blur) / 1.4) var(--sh-lo-c); --shadow-in-sm: inset calc(var(--sh-off) / -3) calc(var(--sh-off) / -3) calc(var(--sh-blur) / 2.8) var(--sh-hi-c), inset calc(var(--sh-off) / 3) calc(var(--sh-off) / 3) calc(var(--sh-blur) / 2.8) var(--sh-lo-c); /* bezel edge-light system (rev1) — 1px machined edges for depth. Append to any raised element: box-shadow: var(--shadow-out), var(--bezel); */ --bezel-hi: color-mix(in srgb, var(--surface-hi) 80%, transparent); --bezel-lo: color-mix(in srgb, var(--surface-lo) 70%, transparent); --bezel: inset 0 1px 0 var(--bezel-hi), inset 0 -1px 0 var(--bezel-lo); --bezel-in: inset 0 1px 0 var(--bezel-lo), inset 0 -1px 0 var(--bezel-hi); /* plastic/metal micro-texture (rev2) — even fractal grain, no stripes. Themes pick --texture: var(--grain-dark) (light bodies) or var(--grain-light) (dark bodies). Grain strength baked in the alpha row. */ --grain-dark: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-light: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* LCD pixel grid (bg/ink/soft/grid are theme knobs since rev2 — dark themes invert) */ --lcd-pixels: repeating-linear-gradient(0deg, var(--lcd-grid) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--lcd-grid) 0 1px, transparent 1px 4px); --lcd-font: "SF Mono", ui-monospace, Menlo, monospace; /* speaker grille + knurl (rev3: drilled holes — darker, with a light under-edge so each hole reads beveled) */ --grille-hole: color-mix(in srgb, var(--surface-lo) 65%, black); --grille: radial-gradient(circle at 4px 5.4px, var(--bezel-hi) 1.5px, transparent 1.7px), radial-gradient(circle at 4px 4px, var(--grille-hole) 1.4px, transparent 1.6px); --knurl: repeating-conic-gradient(var(--surface-hi) 0deg 5deg, var(--surface-lo) 5deg 10deg); /* theme swatch pips around the dial (rev2; vibrant rev3; glossy rev3.2) */ --swatch-cream: hsl(40 92% 68%); --swatch-bronze: hsl(24 85% 52%); --swatch-moss: hsl(150 65% 42%); --gloss: radial-gradient(circle at 32% 28%, hsl(0 0% 100% / .8) 0 16%, hsl(0 0% 100% / 0) 55%); /* debossed carve tokens (rev3.3) — keep component CSS literal-free. --accent-deboss: a carved stroke pressed INTO an accent chip (record dot). --dish: a soft concave shading to sit under a texture on a dished face. --groove: engraved divider rule (dark top edge → light bottom edge). */ --accent-deboss: inset 0 1.5px 1px color-mix(in srgb, var(--accent) 52%, black), inset 0 -1.5px 1px color-mix(in srgb, var(--accent) 74%, white); --dish: radial-gradient(circle at 50% 44%, var(--surface-lo) 0%, transparent 68%); --groove: linear-gradient(var(--surface-lo), var(--surface-hi)); /* carved label text — light highlight beneath reads as engraved (rev4) */ --text-deboss: 0 1px 1px var(--bezel-hi); /* display readout font (rev4) — Google "Bitcount Prop Single Ink" for LCD numerics/labels; falls back to the mono stack if the webfont can't load (offline / PWA). Prose (notes) stays on --lcd-font for legibility. */ --display-font: "Bitcount Prop Single Ink", var(--lcd-font); /* type */ --font: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }