/* ============================================================
Stanzai 2.0 Shell — Design Tokens
Clean-room Stanzai02 shell token pin.
THIS FILE IS THE ONLY PLACE IN src/ WHERE LITERAL COLOR VALUES,
COLOR FUNCTIONS, OR GRADIENT RECIPES MAY BE DEFINED.
`tools/check-design-tokens.js` enforces this. Consumers reference
tokens (plus `transparent` / `currentColor` / inherit) only.
A rebrand edits the palette primitives and semantic mappings here —
never feature CSS. See the design-system doc for the full rules.
Two layers:
1. Palette primitives & composable channels — raw values only.
2. Semantic tokens — named by visual role; what consumers use.
Brand type is binding:
- --display: Abhaya Libre, upright only
- --display-wordmark: Lemon Milk Pro (founder font test) — the
"Stanzai" wordmark lockups only; all other display text stays Abhaya
- --body: Outfit
- --mono: DM Mono
Keep the --font-* aliases for the current reference components, but new
production code should prefer --display / --body / --mono.
============================================================ */
/* FONT TEST — Lemon Milk Pro (founder-supplied OTF, self-hosted), used only
by --display-wordmark for the "Stanzai" wordmark lockups. The single
Regular face is declared across 100–900 so heavier weights don't get
faux-bolded. */
@font-face {
font-family: 'Lemon Milk Pro';
src: url('/fonts/LemonMilkPro-Regular.otf') format('opentype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* ════════════════════════════════════════════════════════════
LAYER 1 — palette primitives & composable channels
════════════════════════════════════════════════════════════ */
/* ---- Channels (for alpha derivations — never retype these numbers) ---- */
--ivory-rgb: 255, 255, 255;
--teal-rgb: 1, 154, 160;
--gold-rgb: 200, 160, 80;
--gold-hi-rgb: 232, 192, 112;
--blue-spark-rgb: 56, 118, 255;
/* Canonical black — the one place 0,0,0 is typed. Shadows/scrims compose
from it: rgba(var(--ink-rgb), 0.N). Comma form only — our channels are
comma triplets, so the slash-alpha form rgb(... / N%) is invalid here. */
--ink-rgb: 0, 0, 0;
/* The FAB liquid-metal shader's tint — founder call: the same blue the
library icons carry (--blue-bright's channels). Consumed as a WebGL
uniform: Fab.tsx reads these channels and normalizes to 0–1. */
--fab-metal-tint-rgb: 127, 178, 255;
/* ---- Ink family (opaque near-black surfaces) ----
One base tone carries the app's dark tint (hue + chroma). Every surface
derives from it: it pins its own lightness (the elevation ladder), scales
the base chroma, and offsets hue to match today's tuned value exactly.
Set --ink-base's chroma to 0 and the whole app goes neutral gray in one
edit; change its hue to re-temperature every surface at once. Lightness
stays per-step by design — that's the ramp, not something to flatten. */
--ink-base: oklch(0.14 0.012 222);
--bg: oklch(from var(--ink-base) 0.126 calc(c * 0.45) calc(h + 4));
--s1: oklch(from var(--ink-base) 0.152 calc(c * 1.04) calc(h - 6));
--s2: oklch(from var(--ink-base) 0.179 calc(c * 1.17) calc(h - 9));
--s3: oklch(from var(--ink-base) 0.207 calc(c * 1.46) calc(h - 13));
--s4: oklch(from var(--ink-base) 0.228 calc(c * 1.54) calc(h - 14));
--ink-room-mobile: oklch(from var(--ink-base) 0.127 calc(c * 0.58) calc(h + 22));
--ink-assist-base: oklch(from var(--ink-base) 0.127 calc(c * 0.74) calc(h + 32));
--ink-mini: oklch(from var(--ink-base) 0.141 calc(c * 0.73) calc(h + 4));
--ink-deep: oklch(from var(--ink-base) 0.157 calc(c * 0.33) calc(h + 7));
--ink-well: oklch(from var(--ink-base) 0.213 calc(c * 1.42) calc(h + 42));
--ink-well-hover: oklch(from var(--ink-base) 0.226 calc(c * 1.75) calc(h + 42));
/* the song page's paper — a bluer neutral, still derived from the base */
--ink-page: oklch(from var(--ink-base) 0.160 calc(c * 0.83) calc(h + 28));
/* ---- Desktop elevation ramp (same --ink-base tone) ---- */
--dt-void: oklch(from var(--ink-base) 0.129 0 h);
--dt-well: oklch(from var(--ink-base) 0.166 calc(c * 0.44) calc(h - 2));
--dt-surface: oklch(from var(--ink-base) 0.129 0 h);
--dt-raised: oklch(from var(--ink-base) 0.204 calc(c * 1.36) calc(h - 12));
--dt-float: oklch(from var(--ink-base) 0.240 calc(c * 1.63) calc(h - 15));
--dt-overlay: oklch(from var(--ink-base) 0.279 calc(c * 2.02) calc(h - 13));
--room-base: oklch(from var(--ink-base) 0.114 calc(c * 1.09) calc(h + 36));
/* ---- Brand color primitives ---- */
--stz-teal: rgb(var(--teal-rgb));
/* Accent tone — derived from the accent hue, not a separate color. See the
accent-ramp note below. */
--teal-bright: oklch(from var(--stz-teal) 0.8006 0.1141 h);
--stz-gold-hi: #e8c070;
--stz-ivory: rgb(var(--ivory-rgb));
--cream: oklch(0.94 0.03 85);
--mark-gold: oklch(0.86 0.17 95);
/* ---- Blue family (current provisional direction) ---- */
--blue-arc-1: #045585;
--blue-arc-2: #036487;
--blue-arc-3: #103455;
--blue-bright: #7fb2ff;
/* ---- Accent ramp: teal tones, all derived from the --teal-rgb hue ----
One accent hue in, every tone out. Each step pins its OKLCH lightness and
chroma (matched to the tuned originals) but inherits the hue (`h`) from
--stz-teal, so a rebrand — teal → any hue — moves all of them at once.
These feed the primary action button and toggle gradients below. The
former --blue-teal was a byte-for-byte duplicate of --stz-teal and is
gone; consumers use --stz-teal directly. */
--teal-orb-hi: oklch(from var(--stz-teal) 0.5610 0.0680 h);
--teal-orb-mid: oklch(from var(--stz-teal) 0.3936 0.0563 h / 0.85);
/* The shadow end is intentionally ~32° cooler than the accent; kept as a
hue offset so it matches the tuned original exactly yet still tracks a
rebrand (the shadow stays cooler than whatever the accent becomes). */
--teal-orb-lo: oklch(from var(--stz-teal) 0.2470 0.0382 calc(h + 32));
--teal-track-hi: oklch(from var(--stz-teal) 0.6025 0.1021 h);
--teal-track-lo: oklch(from var(--stz-teal) 0.4385 0.0726 h);
/* ---- Ink-on-accent (dark content over a light accent) ---- */
--ink-on-teal: #04282a;
--ink-on-gold: #3a2a08;
--ink-on-blue: #0a1f42;
--ink-inverse: #171717;
/* ---- Ivory tint scale (translucent white; aNN = NN% alpha,
three digits = tenths of a percent, e.g. a045 = 4.5%) ---- */
--ivory-a03: rgba(var(--ivory-rgb), 0.03);
--ivory-a05: rgba(var(--ivory-rgb), 0.05);
--ivory-a06: rgba(var(--ivory-rgb), 0.06);
--ivory-a10: rgba(var(--ivory-rgb), 0.1);
--ivory-a13: rgba(var(--ivory-rgb), 0.13);
--ivory-a15: rgba(var(--ivory-rgb), 0.15);
--ivory-a16: rgba(var(--ivory-rgb), 0.16);
--ivory-a20: rgba(var(--ivory-rgb), 0.2);
--ivory-a25: rgba(var(--ivory-rgb), 0.25);
--ivory-a35: rgba(var(--ivory-rgb), 0.35);
--ivory-a42: rgba(var(--ivory-rgb), 0.42);
--ivory-a70: rgba(var(--ivory-rgb), 0.7);
/* ---- Teal tint scale ---- */
--teal-a35: rgba(var(--teal-rgb), 0.35);
--teal-a50: rgba(var(--teal-rgb), 0.5);
/* ---- Gold tint scale ---- */
/* ---- Blue-spark tint scale ---- */
/* ---- Shade scale (translucent black, for shadows & scrims) ---- */
--shade-a40: rgba(0, 0, 0, 0.4);
--shade-a55: rgba(0, 0, 0, 0.55);
/* ════════════════════════════════════════════════════════════
LAYER 2 — semantic tokens (what consumers reference)
════════════════════════════════════════════════════════════ */
/* ---- Named canvases ----
canvas-app — neutral document fallback (html/body/#root only)
canvas-work — the Song Sheet / songwriter work surface (near-black)
canvas-assist — the Home invitation + active mobile Chat assistant
field: the approved blue-black ambient radial.
Applied locally by assistant surface roots, never
by global document painting. */
--canvas-app: var(--bg);
--canvas-work: var(--ink-page);
--canvas-assist:
radial-gradient(
120% 80% at 10% 100%,
oklch(0.42 0.09 230) 0%,
oklch(0.22 0.05 240) 35%,
oklch(0.12 0.02 250) 70%,
oklch(0.08 0.01 250) 100%
)
var(--ink-assist-base);
/* The Library's field: the assist radial with its blacks lifted off the
floor — a neutral lift (the film-grade kind), not a push toward blue.
The glow keeps its original stops; only the void end rises, near-gray.
A second, alpha-faded copy of the glow mirrors it from the top-right
corner (founder call), layered over the opaque base radial. */
--canvas-assist-lifted:
radial-gradient(
120% 80% at 90% 0%,
oklch(0.42 0.09 230) 0%,
oklch(0.23 0.05 240 / 0.6) 35%,
oklch(0.17 0.012 250 / 0) 70%
),
radial-gradient(
120% 80% at 10% 100%,
oklch(0.42 0.09 230) 0%,
oklch(0.23 0.05 240) 35%,
oklch(0.17 0.012 250) 70%,
oklch(0.15 0.008 250) 100%
)
var(--ink-assist-base);
--room-base-mobile: var(--ink-room-mobile);
/* ---- Chip surfaces: dark bodies with a low bounce light rising from
the bottom edge (the founder's fintech reference), plus the
collection card's slab ---- */
--surface-chip: linear-gradient(to top, var(--s3), var(--s2) 55%);
--surface-chip-hover: linear-gradient(to top, var(--s4), var(--s3) 55%);
--surface-slab: linear-gradient(to top, var(--s2), var(--s1) 55%);
/* ---- Glass / veiled surfaces (dark translucent panels) ---- */
--glass-sidebar: rgba(4, 7, 9, 0.62);
--glass-sheet: rgba(6, 12, 14, 0.66);
--glass-composer: rgba(13, 15, 17, 0.5);
--glass-composer-mobile: rgba(13, 15, 17, 0.55);
--glass-popover: rgba(13, 15, 17, 0.85);
--glass-popover-strong: rgba(13, 15, 17, 0.92);
--glass-receipt: rgba(10, 18, 20, 0.88);
--glass-drawer: rgba(9, 11, 12, 0.78);
--glass-panel: rgba(14, 17, 18, 0.85);
--glass-row: rgba(8, 13, 15, 0.55);
--glass-mini-sheet: rgba(14, 25, 27, 0.85);
--well-dim: rgba(7, 7, 7, 0.6);
--well-dark: rgba(7, 7, 7, 0.9);
/* ---- Control surfaces ----
inset: recessed input wells; the composer field well is --dt-void.
The assist composer capsule is the solid assistant-surface control. */
--control-inset: var(--ink-well);
--control-inset-hover: var(--ink-well-hover);
--surface-composer-assist: oklch(0.18 0.01 250);
/* ---- Content ramp (t1 primary → t4 faint) + inverse ---- */
--t1: rgba(var(--ivory-rgb), 0.90);
--t2: rgba(var(--ivory-rgb), 0.75);
--t3: rgba(var(--ivory-rgb), 0.50);
--t4: rgba(var(--ivory-rgb), 0.28);
--text-inverse: var(--ink-inverse);
--accent-teal-bright: var(--teal-bright);
/* ---- Borders ---- */
--b1: #212020;
--b2: #2a2a28;
--b3: #363634;
--b4: #424240;
/* Structural border scale — 5 steps, composed from the ivory channel so the
borders don't depend on the numbered-alpha ladder. Every hairline/edge in
the app snaps to one of these; nothing borders on a raw alpha token. */
--border-struct-weak: rgba(var(--ivory-rgb), 0.04);
--border-struct: rgba(var(--ivory-rgb), 0.06);
--border-struct-strong: rgba(var(--ivory-rgb), 0.1);
--border-struct-heavy: rgba(var(--ivory-rgb), 0.14);
--border-struct-bold: rgba(var(--ivory-rgb), 0.2);
/* ---- Primary action & action content ---- */
--action-primary: linear-gradient(180deg, var(--teal-orb-hi) 0%, var(--teal-orb-mid) 55%, var(--teal-orb-lo) 100%);
--action-primary-compact: linear-gradient(180deg, var(--teal-orb-hi), var(--teal-orb-lo));
--action-content: var(--stz-ivory);
--action-nav: linear-gradient(180deg, var(--blue-arc-1) 0%, var(--blue-arc-2) 55%, var(--blue-arc-3) 100%);
--action-avatar: linear-gradient(150deg, var(--blue-arc-1), var(--stz-teal));
--action-toggle-on: linear-gradient(180deg, var(--teal-track-hi), var(--teal-track-lo));
--action-ghost: linear-gradient(180deg, rgba(var(--ivory-rgb), 0.1), rgba(var(--ivory-rgb), 0.06));
/* ---- Accent badges (onboarding legend) ---- */
--badge-blue: var(--blue-bright);
/* ---- Segmented tabs (the Archive shelves) ----
The active shelf tab is a warm cream pill with dark ink. */
--tab-pill-bg: var(--cream);
--tab-pill-ink: var(--ink-inverse);
/* ---- The studio tab pill (Words · Cover · Paper ONLY) ----
The tab pill matches the Save record button (--auth-cta), not the
segmented-tab accent (founder call; every other studio control keeps
--tab-pill-*). Its swap/press feel is token-gated per theme: dark
runs the original recipe — 220ms crossfade, brightness dim, carved
groove under the finger — and light zeroes all three, because any
mid-switch paint on the near-white track reads as a blip. In dark
these resolve to the pre-existing values, so dark is unchanged. */
--studio-pill-bg: var(--tab-pill-bg);
--studio-pill-ink: var(--tab-pill-ink);
--studio-press: var(--neu-carve);
--studio-press-dim: brightness(0.92);
--studio-swap-ms: 220ms;
/* ---- Card grain ----
The pressing's grain: a neutral fractal-noise tile (desaturated
feTurbulence, inlined so downloaded card images carry the texture)
laid over the card face at whisper opacity by records.css. */
--card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
/* ---- Tactile studio controls ----
The Card Studio's physical controls read as cut from the surface:
grooves carved in (inset dual shadow), thumbs and active pills
pushed out. Alpha-only shadows so they ride the glassy sheet and
the desktop panels alike. */
--neu-body: #2b333d;
--neu-carve: inset 2px 2px 5px rgba(var(--ink-rgb), 0.55), inset -2px -2px 5px rgba(var(--ivory-rgb), 0.1);
--neu-raise: -2px -2px 6px rgba(var(--ivory-rgb), 0.1), 3px 3px 8px rgba(var(--ink-rgb), 0.6);
/* ---- Scrim / overlay ---- */
--scrim: rgba(var(--ink-rgb), 0.55);
--scrim-modal: rgba(3, 5, 9, 0.62);
/* The record viewer's frosted backdrop — darker than the modal scrim
because the world behind it also blurs away. */
--scrim-frost: rgba(3, 5, 9, 0.74);
/* ---- Shared shadow & highlight treatments (repeated verbatim) ---- */
--shadow-orb: 0 10px 24px -12px rgba(var(--teal-rgb), 0.6), inset 0 1px 0 rgba(var(--ivory-rgb), 0.18);
--shadow-navpill: 0 10px 24px -10px rgba(var(--ink-rgb), 0.5), inset 0 1px 0 rgba(var(--ivory-rgb), 0.14);
/* FAB body: the near-black disc that sits over the liquid-metal shader,
leaving a thin animated teal ring at the rim (the shader is the border). */
--fab-body: linear-gradient(180deg, var(--ink-well) 0%, var(--ink-mini) 100%);
/* ---- Light-catches & washes (decorative gradient recipes) ---- */
--lightcatch-composer: radial-gradient(ellipse 55% 44% at 88% 10%, rgba(var(--ivory-rgb), 0.1) 0%, transparent 60%);
--lightcatch-composer-mobile: radial-gradient(ellipse 55% 46% at 88% 10%, rgba(var(--ivory-rgb), 0.15) 0%, transparent 60%);
--lightcatch-teal-tall: radial-gradient(ellipse 46% 120% at 96% 0%, rgba(var(--teal-rgb), 0.2), transparent 60%);
--lightcatch-teal-card: radial-gradient(ellipse 60% 42% at 84% 12%, rgba(var(--teal-rgb), 0.22) 0%, rgba(var(--teal-rgb), 0.09) 52%, transparent 100%);
--wash-teal-menu: linear-gradient(180deg, rgba(var(--teal-rgb), 0.1), transparent 120px);
--wash-teal-info: linear-gradient(180deg, rgba(var(--teal-rgb), 0.11), transparent 140px);
/* 1px raised-card top edge (suggestion cards). */
--hairline-card-top: linear-gradient(to right, transparent, rgba(var(--ivory-rgb), 0.1), transparent);
--wash-scroll-thumb: linear-gradient(90deg, transparent, rgba(var(--teal-rgb), 0.5), transparent);
--wash-mini-chat: radial-gradient(80% 50% at 50% 110%, rgba(var(--blue-spark-rgb), 0.16), transparent 60%);
--divider-fade: linear-gradient(90deg, rgba(var(--ivory-rgb), 0.16), rgba(var(--ivory-rgb), 0.02));
/* Tool-call status shimmer: a bright band swept across muted label text. */
--shimmer-tool-status: linear-gradient(100deg, var(--t3) 32%, var(--stz-ivory) 50%, var(--t3) 68%);
--mark-highlight: color-mix(in oklab, var(--mark-gold) 40%, transparent);
/* ---- Song-DNA builder ----
Composed recipes for the DNA modal's surfaces, riding the shell's teal
accent like every songwriter-action surface: the composition strip's
fill + corner glow, the filled/current dimension glyph tiles, the
sheet's raised-ink fill, and the edge-fade mask for its horizontal
chip rows. */
--dna-comp-fill: linear-gradient(180deg, rgba(var(--teal-rgb), 0.05), rgba(var(--teal-rgb), 0.01));
--dna-comp-glow: radial-gradient(180px 80px at 0% 0%, rgba(var(--teal-rgb), 0.09), transparent 70%);
--dna-glyph-filled: linear-gradient(160deg, rgba(var(--teal-rgb), 0.18), rgba(var(--teal-rgb), 0.04));
--dna-glyph-current: linear-gradient(160deg, rgba(var(--teal-rgb), 0.24), rgba(var(--teal-rgb), 0.06));
--dna-sheet-fill: linear-gradient(180deg, var(--dt-raised) 0%, var(--bg) 180px);
--mask-fade-x: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
/* ---- Player surface ----
The full-screen record player (from the founder's playlist handoffs),
re-cut in the shell's teal: a deep room wash behind the carousel, the
glowing play disc, and its thrown light. */
--player-bg:
radial-gradient(ellipse 130% 56% at 50% -8%, rgba(var(--blue-spark-rgb), 0.22) 0%, rgba(var(--blue-spark-rgb), 0) 66%),
radial-gradient(ellipse at top, #152a47 0%, #0b1626 58%, #06090f 100%);
--player-play: radial-gradient(circle at 30% 30%, var(--blue-bright), var(--blue-arc-2) 72%, var(--blue-arc-3));
--shadow-player-play: 0 10px 40px -5px rgba(var(--blue-spark-rgb), 0.45);
/* ════════════════════════════════════════════════════════════
Account flow (auth wall · account menu/sheet · settings · legal)
Ported from the founder-supplied "Stanzai auth handoff" — its C map is
the visual authority for these surfaces. Values that already existed as
shell tokens are reused by the auth CSS (--well-dim, --b1, --t2…--t4,
--ivory-a16, --teal-a50, --action-avatar); only the values the shell
didn't have live here.
════════════════════════════════════════════════════════════ */
/* ---- Auth accents ---- */
--auth-label: #9fb6d4; /* cool section labels */
--auth-danger-rgb: 217, 119, 87; /* destructive accent channel */
--auth-danger-text: #d99a86;
--auth-danger-dot: rgb(var(--auth-danger-rgb));
--auth-label-rgb: 159, 182, 212;
/* ---- Auth surfaces ---- */
--auth-card: rgba(8, 13, 15, 0.62); /* wall card glass */
--auth-panel: rgba(10, 17, 19, 0.94); /* settings dialog */
--auth-panel-opaque: rgba(10, 17, 19, 0.97); /* legal viewer */
--auth-panel-mobile: rgba(6, 9, 10, 0.97); /* full-screen settings */
--auth-popover: rgba(18, 30, 32, 0.94); /* account menu */
--auth-sheet: rgba(14, 17, 18, 0.92); /* account bottom sheet */
--auth-toast: rgba(20, 34, 36, 0.95);
--auth-side-well: rgba(3, 6, 8, 0.5); /* settings tab rail */
--auth-cta: rgba(var(--ivory-rgb), 0.92); /* primary pill button */
--auth-cta-ink: #0b1620;
--auth-focus-ring: inset 0 0 0 1px rgba(var(--teal-rgb), 0.5), 0 0 0 3px rgba(var(--teal-rgb), 0.08);
--auth-scrim: rgba(2, 4, 6, 0.72); /* legal viewer backdrop */
--auth-scrim-dialog: rgba(2, 4, 6, 0.55); /* settings dialog backdrop */
/* ---- Google brand marks (the OAuth button's four-color G) ---- */
--google-red: #ea4335;
--google-blue: #4285f4;
--google-yellow: #fbbc05;
--google-green: #34a853;
/* ---- Grainient (WebGL wall backdrop) — per-Room palettes.
The component reads these computed values at runtime; hex only. ---- */
--grainient-blue-hour-1: #141415;
--grainient-blue-hour-2: #0b1529;
--grainient-blue-hour-3: #1c4977;
/* ---- Record pressing presets ----
Each token is one preset's three colors as a space-separated list:
paper-top paper-bottom frame. The records code reads the computed
values at runtime (Grainient's pattern) and resolves them to concrete
hex on the pressed record, so stored cards are self-contained. Card
ink is never stored as arbitrary color: it resolves to one of the
three allowed inks below (auto-picked by paper luminance). */
--recp-ivory: #dee2d6 #efe6c9 #b6c3c6;
--recp-ink: #262322 #1c1a19 #b6c3c6;
--recp-blue-hour: #0b1529 #1c3350 #9fb6d4;
--recp-midnight: #0a0d12 #141b26 #5c718f;
--recp-slate: #2b3136 #1d2226 #a7b4bc;
--recp-fog: #e8eaec #d3d8dd #8fa0ab;
--recp-sage: #d7ddd0 #bcc7b6 #8fa08b;
--recp-deep-teal: #06282b #0b3d40 #7fb5b8;
--recp-plum: #17121e #2a2138 #a898c4;
--recp-sand: #e9e2d3 #d8cbb2 #b3a68c;
--recp-rose-ash: #e5dcdc #cdbcbc #a58c8c;
--recp-forest: #0f1712 #1c2b20 #90ab97;
--recp-paper-white: #f4f3ef #e7e5df #9aa4a8;
--recp-charcoal-blue: #171c22 #232b35 #93a3b8;
/* Bolder / wider range — 2, 3, and 4-color papers (last value = frame). */
--recp-ember: #ef7a2e #120d0a #e0a05f;
--recp-coral: #ff7a59 #7a2f3a #f2b8a8;
--recp-clay: #c8724a #f0d6b0 #8a5a3a;
--recp-teal-gold: #0c3b3e #d9a441 #9fc6c2;
--recp-crimson: #5c1020 #d83a4a #e0a0a8;
--recp-mono: #f4f4f2 #141410 #8a8a86;
--recp-sunset: #f5a24b #e0567f #4d3a8c #f0c9a0;
--recp-dusk: #16233d #6a4a7a #d0708e #a6b4d2;
--recp-vapor: #2a1a4a #ff5db1 #34d0d8 #c9a8ea;
--recp-aurora: #0a2a2e #1f6f5c #7ad0a0 #e8e0a0 #9fc6b0;
/* Color-picker spectrums — functional color space (the full hue wheel and
the saturation/brightness overlays), not part of the brand palette. */
--picker-hue: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
--picker-sv-overlay: linear-gradient(to top, #000000, transparent),
linear-gradient(to right, #ffffff, transparent);
/* ---- Card inks (the only three text colors a pressed card may use) ---- */
--card-ink-dark: #22211d;
--card-ink-white: #ffffff;
--card-ink-ivory: #e9e4d2;
/* Theme-invariant white channel for pressed-card chrome (frame hairlines,
the generative cover's light catch, the cover play control). Cards are
self-contained stored looks: their chrome must never ride the theming
ivory channel, or on-screen cards drift from the saved artifacts. */
--card-white-rgb: 255, 255, 255;
/* The fragment modal's select chevron — hoisted so the stroke can follow
the theme (light gray on dark controls, ink on light ones). */
--select-chevron: url("data:image/svg+xml;utf8,");
/* The structure menu's sheet treatment: top light, bottom vignette, drop.
Declared as a token so the inline consumer can re-theme. */
--shadow-menu-sheet: 0 1px 0 rgba(var(--ivory-rgb), 0.07) inset, 0 -40px 70px -30px rgba(var(--ink-rgb), 0.7) inset, 0 40px 80px -20px rgba(var(--ink-rgb), 0.75);
/* ---- Assistant avatar (the founder's avatar handoff) ----
The tile's blues are avatar-local by design — taken from the app icon
artwork, not the Stanzai palette. Channels, so the skins compose their
drop/halo/lift locally. */
--avatar-blue-rgb: 40, 60, 220;
--avatar-halo-rgb: 70, 95, 255;
/* Pressed-card recipes live below, OUTSIDE :root — see the comment there. */
/* ---- Room preference swatches (Preferences → Room) ---- */
--swatch-blue-hour: radial-gradient(130% 110% at 50% 100%, rgba(56, 118, 255, 0.75), #081018 75%);
/* ---- Type families ---- */
--display: 'Abhaya Libre', serif;
/* FONT TEST: the "Stanzai" wordmark lockups render in Lemon Milk Pro
(see @font-face atop this file). Point this back at var(--display)
to end the test. */
--display-wordmark: 'Lemon Milk Pro', serif;
--body: 'Outfit', sans-serif;
--mono: 'DM Mono', monospace;
/* One display serif everywhere, per founder direction: the account flow
is unified on the app's binding Abhaya Libre (the handoff's Cormorant
Garamond is retired). The scoped alias stays so the seam is named. */
--display-account: var(--display);
/* Compatibility aliases for the reference components. */
--font-display: var(--display);
--font-ui: var(--body);
--font-mono: var(--mono);
/* ---- Type scale ----
Readability floors: reading/body text ≥15.5px (16px in mobile inputs
and chat), mono labels/meta/chips 10.5–12px — never below 10.5px for
legible runtime text. */
--fs-display: 28px;
--fs-title: 20px;
--fs-heading: 16px;
--fs-body: 15.5px;
--fs-label: 11px;
--fs-meta: 13px;
--lh-tight: 1.3;
--lh-normal: 1.5;
--lh-loose: 1.65;
/* ---- Radii ---- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 999px;
/* ---- Spacing ---- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-6: 24px;
--sp-8: 32px;
--sp-12: 48px;
--page-pad: 20px;
/* ---- Motion ---- */
--anim-fast: 150ms;
--anim-normal: 250ms;
--anim-slow: 350ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
/* ---- Layout ---- */
--dt-left-w: 302px;
--dt-left-w-session: 288px;
--dt-left-w-rail: 68px;
--sheet-default-w: 460px;
--content-col: 740px;
--doc-col: 640px;
}
/* ════════════════════════════════════════════════════════════
Pressed-card recipes — declared ON the card scopes, not :root.
A custom property substitutes its inner var()s where it is DECLARED;
on :root the --crd-* channels are unset, so the recipe would freeze
invalid and inherit uselessly. Declared here, each pressing's channels
(set per element from the record's stored look) feed the same recipe.
--card-cover-art is the generative cover: the pressing's own colors
folded into directional light — the default until gallery art and
uploads exist. .szrc-paper is the bare recipe carrier: any element
(Card Studio previews, swatches) that needs the paper or cover art
without the card's other styles.
════════════════════════════════════════════════════════════ */
.szrc-card,
.szrc-tile,
.szrc-paper {
/* Angle and stop positions are studio-adjustable per pressing; the
defaults are the classic 155° full-run pressing, which is also what
every pre-studio record resolves to. A solid paper sets both color
channels to the same value — one recipe serves every paper shape. */
--card-paper: linear-gradient(
var(--crd-paper-angle, 155deg),
var(--crd-s1c, var(--crd-paper-top)) var(--crd-s1a, var(--crd-stop-top, 0%)),
var(--crd-s2c, var(--crd-paper-bottom)) var(--crd-s2a, var(--crd-stop-bottom, 100%)),
var(--crd-s3c, var(--crd-paper-bottom)) var(--crd-s3a, 100%),
var(--crd-s4c, var(--crd-paper-bottom)) var(--crd-s4a, 100%)
);
--card-cover-art:
radial-gradient(85% 60% at 74% 22%, rgba(var(--card-white-rgb), 0.25), transparent 58%),
radial-gradient(120% 95% at 20% 86%, var(--crd-paper-top), transparent 74%),
linear-gradient(200deg, var(--crd-frame) 0%, var(--crd-paper-top) 52%, var(--crd-paper-bottom) 100%);
}
/* ════════════════════════════════════════════════════════════
LIGHT MODE — the founder's warm-ivory theme.
Source of truth: the light-mode Library and Player handoffs
plus the founder's screenshots. One warm hue for the canvas
at hue 85; everything else sits cool at hue 230 to 245. The
dark shell stays the default; this block re-maps the same
token names when the document root carries data-theme='light'
— the theme store owns that attribute.
Two channel flips carry most of the theme:
- The ivory channel becomes the light ink, so every local
composition of white-alpha text, rims, and fills inverts to
ink-alpha in one move, and the t1 to t4 ramp lands on the
handoff ink scale by the same alpha math.
- The teal channel becomes the handoff slate accent, and the
derived accent ramp, washes, rings, and action gradients
follow it.
This block must stay BELOW the main root block above: the
Tailwind theme generator brace-matches only the first root
block in the file, and it must keep parsing the dark set.
Only shadow, gradient, and light-only lm-prefixed names may
be minted here; single-color tokens must override names the
main block already declares, or Tailwind consumers would
silently keep dark values.
════════════════════════════════════════════════════════════ */
:root[data-theme='light'] {
color-scheme: light;
/* ---- Channels ---- */
/* Content channel: the handoff primary ink. Everything that
composed white-alpha over the dark canvas now composes this
ink-alpha over ivory. */
--ivory-rgb: 43, 51, 59;
/* Accent channel: the handoff slate. The oklch-derived accent
ramp inherits this hue automatically. */
--teal-rgb: 94, 124, 147;
--gold-rgb: 158, 122, 48;
--gold-hi-rgb: 178, 138, 58;
--blue-spark-rgb: 94, 124, 147;
--fab-metal-tint-rgb: 94, 124, 147;
/* ---- Ink family: the ivory surface ladder ----
Lightness is pinned per step, as in the dark ramp: the canvas
is the handoff ivory, raised surfaces rise toward white, and
recessed wells cool toward the icon-circle blue. */
--ink-base: oklch(0.973 0.008 85);
--bg: oklch(0.973 0.008 85);
--s1: oklch(0.982 0.006 90);
--s2: oklch(0.987 0.005 95);
--s3: oklch(0.992 0.004 100);
--s4: oklch(0.996 0.002 100);
--ink-room-mobile: oklch(0.975 0.008 90);
--ink-assist-base: oklch(0.973 0.008 85);
--ink-mini: oklch(0.985 0.006 90);
--ink-deep: oklch(0.968 0.008 85);
--ink-well: oklch(0.945 0.012 235);
--ink-well-hover: oklch(0.93 0.014 235);
--ink-page: oklch(0.988 0.005 90);
/* ---- Desktop elevation ramp ---- */
--dt-void: oklch(0.955 0.009 85);
--dt-well: oklch(0.95 0.01 90);
--dt-surface: oklch(0.973 0.008 85);
--dt-raised: oklch(0.99 0.004 95);
--dt-float: oklch(0.995 0.003 100);
--dt-overlay: oklch(0.998 0.002 100);
--room-base: oklch(0.965 0.008 90);
/* ---- Brand primitives re-cut for a light ground ---- */
/* Accent text and icons: the handoff accent, dark enough to
read on ivory. The dark shell's 0.80-lightness accent tone
would wash out here. */
--teal-bright: oklch(0.53 0.055 235);
--stz-gold-hi: #a9812f;
--blue-arc-1: #5e7c93;
--blue-arc-2: #4a6479;
--blue-arc-3: #3a5063;
--blue-bright: #4a6479;
/* ---- Accent ramp: the primary-action gradient steps match the
handoff FAB and play-button gradient ---- */
--teal-orb-hi: oklch(from var(--stz-teal) 0.62 0.05 calc(h - 5));
--teal-orb-mid: oklch(from var(--stz-teal) 0.53 0.055 h);
--teal-orb-lo: oklch(from var(--stz-teal) 0.46 0.06 calc(h + 7));
/* ---- Ink-on-accent ---- */
--ink-inverse: #f6f8fa;
/* The gold accent darkens in light mode, so its ink lightens. */
--ink-on-gold: #fdf3e0;
/* ---- Glass / veiled surfaces: white glass over ivory ---- */
--glass-sidebar: rgba(255, 255, 255, 0.62);
--glass-sheet: rgba(255, 255, 255, 0.7);
--glass-composer: rgba(255, 255, 255, 0.55);
--glass-composer-mobile: rgba(255, 255, 255, 0.6);
--glass-popover: rgba(255, 255, 255, 0.88);
--glass-popover-strong: rgba(255, 255, 255, 0.94);
--glass-receipt: rgba(255, 255, 255, 0.92);
--glass-drawer: rgba(252, 251, 248, 0.9);
--glass-panel: rgba(255, 255, 255, 0.9);
--glass-row: rgba(255, 255, 255, 0.55);
--glass-mini-sheet: rgba(255, 255, 255, 0.92);
/* Glass tint (jump-to-latest disc): a whisper of white, flat — any
gradient or highlight reads as a painted button surface and hides
the blurred transcript, which IS the effect. */
--glass-jump-tint: rgba(var(--card-white-rgb), 0.12);
--well-dim: rgba(43, 51, 59, 0.05);
--well-dark: rgba(255, 255, 255, 0.92);
/* ---- Control surfaces ---- */
--surface-composer-assist: oklch(0.995 0.004 95);
/* ---- Content ramp: follows the flipped ivory channel; t1 is
strengthened to land on the handoff primary ink, and the faint
tiers are lifted — ink-alpha fades on ivory faster than
ivory-alpha did on near-black ---- */
--t1: rgba(var(--ivory-rgb), 0.95);
--t3: rgba(var(--ivory-rgb), 0.58);
--t4: rgba(var(--ivory-rgb), 0.42);
/* ---- Borders: warm hairline grays over ivory ---- */
--b1: #e7e4dd;
--b2: #dfdcd4;
--b3: #d4d1c9;
--b4: #c9c6be;
/* ---- Primary action content: true white on the slate
gradients, matching the handoff glyphs ---- */
--action-content: #ffffff;
/* ---- Segmented tabs: active pills go slate with white ink (founder
call — blue actives everywhere in light, EXCEPT the record
editor: --studio-pill-* below). A solid, not the chip
gradient: several consumers transition background, and gradients
snap instead of interpolating. ---- */
--tab-pill-bg: oklch(0.55 0.052 235);
--tab-pill-ink: #ffffff;
/* ---- The studio tab pill: the Save record charcoal, not the tab
slate (founder call — the rest of the editor keeps --tab-pill-*).
The swap is a hard cut and the press carries no paint: on this
near-white track any mid-switch paint reads as a blip
(founder's device recordings). ---- */
--studio-pill-bg: var(--auth-cta);
--studio-pill-ink: var(--auth-cta-ink);
--studio-press: none;
--studio-press-dim: none;
--studio-swap-ms: 0ms;
/* ---- Tactile studio controls: carved from a light panel ----
The carve keeps the dark inset dominant, as the dark theme does:
grooves sit on a near-white sheet, so a strong white inset floods
the well brighter than its surroundings and the groove reads as
embossed — inverted. Shadow leads, the white lip only kisses. */
--neu-body: #e8ebef;
--neu-carve: inset 2px 2px 5px rgba(var(--ink-rgb), 0.16), inset -2px -2px 5px rgba(255, 255, 255, 0.55);
--neu-raise: -2px -2px 6px rgba(255, 255, 255, 0.9), 3px 3px 8px rgba(var(--ink-rgb), 0.12);
/* ---- Scrim / overlay: still dark over content, lighter hand;
the frost goes light because the world behind it blurs
into the ivory field ---- */
--scrim: rgba(var(--ink-rgb), 0.3);
--scrim-modal: rgba(31, 38, 46, 0.35);
--scrim-frost: rgba(246, 244, 240, 0.65);
/* ---- Shared shadow & highlight treatments ---- */
--shadow-orb: 0 10px 24px -12px rgba(var(--teal-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
--shadow-navpill: 0 10px 24px -10px rgba(var(--ink-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
--fab-body: linear-gradient(155deg, oklch(0.62 0.05 230) 0%, oklch(0.46 0.06 242) 100%);
/* ---- Light-catches: white catches read as clean sheen on
light glass where the ivory-channel flip would smudge ---- */
--lightcatch-composer: radial-gradient(ellipse 55% 44% at 88% 10%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%);
--lightcatch-composer-mobile: radial-gradient(ellipse 55% 46% at 88% 10%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
/* ---- Named canvases ----
Each room canvas carries the Grainient grain field as its top
layer, UNDER everything the screen draws: --canvas-grain is a
data-URL tile of recordGrain's grainScalar (Grainient's own
hash), published on the document root at boot by
src/shell/themeGrain.ts, whisper alpha baked in. Background
only, founder call — components stay clean and scrolling
content never slides against a fixed texture. The 384px tile
paints at 192px so 2x screens get one noise sample per device
pixel. Falls back to none (no JS, no 2D canvas); the dark
block never references it. */
--canvas-app:
var(--canvas-grain, none) 0 0 / 192px 192px repeat
var(--bg);
/* The assistant field: the dark blue-black radial's geometry
with the founder's light welcome — ivory with a soft slate
glow rising from the bottom-left. */
--canvas-assist:
var(--canvas-grain, none) 0 0 / 192px 192px repeat,
radial-gradient(
120% 80% at 10% 100%,
oklch(0.88 0.04 230) 0%,
oklch(0.93 0.022 240) 35%,
oklch(0.96 0.01 250 / 0) 70%
)
oklch(0.973 0.008 85);
/* The Library's field: the handoff wash verbatim — a white
crown from the top and the cool corner glow at bottom-right,
fading to white-alpha zero so the wash never grays. */
--canvas-assist-lifted:
var(--canvas-grain, none) 0 0 / 192px 192px repeat,
radial-gradient(
120% 60% at 50% -10%,
rgba(255, 255, 255, 0.85) 0%,
rgba(255, 255, 255, 0) 60%
),
radial-gradient(
90% 50% at 100% 100%,
oklch(0.95 0.014 235 / 0.5) 0%,
rgba(255, 255, 255, 0) 70%
),
oklch(0.973 0.008 85);
/* ---- Player surface: the handoff player wash verbatim, and
the play disc carries the handoff gradient ---- */
--player-bg:
radial-gradient(120% 55% at 50% -8%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 62%),
radial-gradient(90% 45% at 100% 100%, oklch(0.95 0.014 235 / 0.45) 0%, rgba(255, 255, 255, 0) 70%),
oklch(0.973 0.008 85);
--player-play: linear-gradient(155deg, oklch(0.62 0.05 230) 0%, oklch(0.46 0.06 242) 100%);
--shadow-player-play: 0 14px 30px -12px rgba(var(--ink-rgb), 0.34), inset 0 1px 1px rgba(255, 255, 255, 0.4);
/* ---- Account flow ---- */
--auth-label: oklch(0.5 0.04 240);
--auth-danger-text: #b4543a;
--auth-label-rgb: 90, 114, 136;
--auth-card: rgba(255, 255, 255, 0.62);
--auth-panel: rgba(255, 255, 255, 0.94);
--auth-panel-opaque: rgba(253, 252, 249, 0.98);
--auth-panel-mobile: rgba(250, 248, 244, 0.97);
--auth-popover: rgba(255, 255, 255, 0.94);
--auth-sheet: rgba(255, 255, 255, 0.92);
--auth-toast: rgba(255, 255, 255, 0.95);
--auth-side-well: rgba(43, 51, 59, 0.04);
--auth-cta: #2b333b;
--auth-cta-ink: #faf8f4;
--auth-scrim: rgba(31, 38, 46, 0.35);
--auth-scrim-dialog: rgba(31, 38, 46, 0.28);
/* ---- Grainient: the light room — blue hour at dawn ---- */
--grainient-blue-hour-1: #faf8f4;
--grainient-blue-hour-2: #e9eef5;
--grainient-blue-hour-3: #9db8d2;
/* ---- Assistant avatar, light skin: the frosted tile's light edges ---- */
--avatar-edge-x: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
--avatar-edge-y: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent, rgba(255, 255, 255, 0.35));
/* ---- Re-themed chrome recipes ---- */
--select-chevron: url("data:image/svg+xml;utf8,");
--shadow-menu-sheet: inset 0 0 0 1px var(--lm-rim), var(--lm-elev-card);
/* ════════════════════════════════════════════════════════════
Light-only vocabulary — lm-prefixed, defined nowhere in the
dark set. Consumed exclusively by feature rules scoped to
data-theme='light', so they never resolve in dark mode and
never need a dark value. Shadows and gradients only reach
CSS consumers, so the Tailwind bridge is unaffected.
════════════════════════════════════════════════════════════ */
/* The Library top bar's collapse frost goes white, not smoked —
a light-only channel for the scroll-scrim composition. */
--lm-topbar-scrim-rgb: 255, 255, 255;
/* The handoff card fills and rims */
--lm-card: rgba(255, 255, 255, 0.55);
--lm-card-strong: rgba(255, 255, 255, 0.92);
--lm-rim: rgba(255, 255, 255, 0.85);
--lm-rim-strong: rgba(255, 255, 255, 0.9);
--lm-icon-circle: oklch(0.95 0.018 235);
--lm-chip-line: rgba(var(--ink-rgb), 0.09);
--lm-record-tile: linear-gradient(150deg, oklch(0.94 0.02 235) 0%, oklch(0.9 0.03 245) 100%);
--lm-chip-active: linear-gradient(150deg, oklch(0.6 0.05 230), oklch(0.5 0.055 240));
/* The handoff elevation scale: 1px contact plus pulled-in
ambient, never a single-layer shadow */
--lm-elev-1: 0 1px 1px rgba(var(--ink-rgb), 0.018), 0 10px 22px -14px rgba(var(--ink-rgb), 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.75);
--lm-elev-pill: 0 1px 1px rgba(var(--ink-rgb), 0.015), 0 8px 18px -12px rgba(var(--ink-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--lm-elev-chip: 0 1px 2px rgba(var(--ink-rgb), 0.05), 0 8px 16px -10px rgba(var(--ink-rgb), 0.22);
--lm-elev-card: 0 1px 1px rgba(var(--ink-rgb), 0.02), 0 8px 20px -14px rgba(var(--ink-rgb), 0.1);
--lm-elev-tile: 0 1px 1px rgba(var(--ink-rgb), 0.02), 0 10px 24px -14px rgba(var(--ink-rgb), 0.14);
--lm-elev-fab: 0 2px 4px -1px rgba(var(--ink-rgb), 0.1), 0 12px 28px -10px rgba(var(--ink-rgb), 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.4);
--lm-elev-cover: 0 2px 3px -1px rgba(var(--ink-rgb), 0.05), 0 26px 48px -22px rgba(var(--ink-rgb), 0.3);
--lm-elev-peek: 0 1px 1px rgba(var(--ink-rgb), 0.02), 0 10px 24px -16px rgba(var(--ink-rgb), 0.16);
--lm-elev-control: 0 1px 1px rgba(var(--ink-rgb), 0.018), 0 8px 18px -12px rgba(var(--ink-rgb), 0.12);
--lm-elev-thumb: 0 1px 1px rgba(var(--ink-rgb), 0.02), 0 8px 18px -14px rgba(var(--ink-rgb), 0.2);
}