/* ============================================================
EMBURY — design system (v81 multi-theme)
============================================================
Four bindings, each evoking a distinct bar mood without
borrowing any specific trademarked establishment's identity.
Each binding re-skins the entire app: color, accent, hairline
strategy, display face, geometry, ornamental divider, dropcap.
walnut — Gilded book. Leather + 24kt gold leaf.
Walnut + gold + oxblood + cream.
Default binding. Embossed minimal radius.
Display: Bodoni 72. Ornament: ❦ (fleuron).
platinum — Mirror salon. Deco silver.
Midnight + platinum + Bristol blue.
Sharp Deco geometry. Display: Didot.
Ornament: ◇ (Deco lozenge).
verdant — Absinthe garden. Antique brass + sage.
Sage + antique brass + oxblood + champagne.
Belle Époque flourish. Display: Big Caslon.
Ornament: ❀ (laurel flower).
amber — Rum hold. Nautical teal + rum amber.
Deep teal + rum amber + doubloon gold.
Weathered wood mood. Display: Bodoni 72.
Ornament: ✦ (compass star).
The binding is set by the data-theme attribute on . The
inline boot script in index.html applies it from localStorage
before first paint to avoid a flash. theme.js exposes the
read/write API; settings-view.js renders the picker.
Add a new binding by adding a [data-theme="X"] block below and
registering its name in theme.js THEMES. Every block must
provide the full token surface; nothing inherits across
bindings (other than the universals at :root, just below).
============================================================ */
/* ============================================================
UNIVERSALS — never overridden by themes
============================================================ */
:root {
/* Type stacks — body + italic + sans + mono are the same
across every theme. Display face is theme-specific (defined
in each theme block as --serif-display). */
--serif: "Iowan Old Style", "Iowan", "Hoefler Text", "Cormorant Garamond", "EB Garamond", Georgia, serif;
--serif-italic: "Big Caslon", "Hoefler Text", "Iowan Old Style", "Garamond", Georgia, serif;
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
--mono: ui-monospace, "SF Mono", "Menlo", monospace;
/* Cross-theme geometry constants. Per-theme corner radius
lives in --radius (defined in each theme block). */
--radius-md: 8px;
--radius-lg: 12px;
--hairline: 1px;
/* Safe area */
--safe-top: env(safe-area-inset-top, 0);
--safe-bottom: env(safe-area-inset-bottom, 0);
/* v320 — Marcus (CTO) add to Maya's audit. Modal backdrops were
hardcoded rgba(0,0,0,0.78) which is correct on the 10 dark
themes but overpowering on the 2 light themes (Pineapple +
Aperitivo) — a near-opaque black wash on a sand-cream UI
reads as broken, not focused. --scrim is the modal/sheet
dimming token; light themes override it to a warm-dark
translucent that still focuses attention on the foreground
sheet without nuking the rest of the page. */
--scrim: rgba(0, 0, 0, 0.78); /* dark-theme default */
--scrim-soft: rgba(0, 0, 0, 0.32); /* card-star + lighter overlays */
/* Body vignette — edge-darken radial. Default is the original
55% black wash; light themes override to a warm low-alpha tint. */
--vignette: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%);
}
/* =============================================================
v320 — DESIGN-SYSTEM SEMANTIC NOTES (for the next engineer)
=============================================================
This block is documentation, not styles. Keep it near :root so
future theme edits land here first.
TOKEN ROLES — what each shared variable MEANS across all bindings:
--accent — Primary brand color in the binding. The hero.
Used for tab indicators, focus rings, primary
buttons, links, eyebrows. Must AA-pass against
--bg in BOTH directions (it appears as text on
--bg AND text on --accent appears as
--on-accent). Themes pick: gold (Walnut), palm
(Pineapple), oxblood-shifted-terracotta
(Mezcal), amber (Ember), Riviera coral,
Campari red (Aperitivo), cabaret crimson
(Velvet), cinnabar (Habana), bone (Onyx), rose
gold (Boudoir), brass (Fireside, Amber).
--maraschino — Secondary warm-red / warning / cherry-mood
accent. Used by alert/error UI (devices-error,
admin row-error background, comment delete
state). Each theme interprets in its own
material: oxblood (Walnut), claret (Boudoir,
Velvet), terracotta (Mezcal), sunset coral
(Pineapple, Amber, Riviera), terrazzo plum
(Aperitivo), cinnabar (Habana), hot cocoa
(Fireside), graphite mid (Onyx — no red in the
palette, falls back to neutral). When picking
new themes: this token is the "warm second
voice" — never the primary, never neutral
(unless the palette has no warm secondary,
in which case mid-neutral is OK).
--brass-light / --brass / --brass-deep
— The "gilt" gold ramp. Cuts across themes:
always a gold/amber family. Used for chip
fills, badges, decorative pinstripes. Light
themes use a darker --brass-deep for legible
text-on-cream; dark themes use --brass-light
for legible text-on-dark.
--bottle — Atmospheric "third color." Usually green
(cypress, palm frond, agave, hunter, banquette)
or earth (cedar, cocoa). Stays muted; the
"supporting cast" in scene terms.
--on-accent — Text color that sits ON TOP of --accent.
Dark themes: dark surface color. Light themes:
cream. Used by .btn (primary), .compass-chip
active fills. If you change --accent for any
theme, re-check --on-accent contrast.
--scrim — Modal/sheet backdrop dim. Dark themes default
to rgba(0,0,0,0.78); light themes override to
warm semi-translucent. Use var(--scrim), never
hardcoded rgba(0,0,0,...).
--vignette — Body edge-darken radial. Same dark-vs-light
polarity rule as --scrim.
IF YOU ADD A NEW THEME:
1. Set all seven semantic tokens above.
2. Mind the --accent / --on-accent dual contrast.
3. If the theme is LIGHT (bg luminance > 0.5), override --scrim
and --vignette to warm low-alpha — otherwise modals will
feel like a wall.
4. Set --print-edition-name and --section-plate-* for the
editorial print path.
5. Set --accent-rgb / --maraschino-rgb / --brass-rgb /
--bottle-rgb (comma-separated RGB ints) so the rgba(var(...))
chip glow + atmosphere gradients land correctly.
6. Pick a per-theme display face in --serif-display and a
single ornament glyph in --ornament-divider /
--ornament-section.
============================================================= */
/* ============================================================
THEME — EMBER (default) — v335
Speakeasy basement. Soot-black brick walls, candle-flame amber
on glassware and brass tap handles, crimson leather banquette,
graphite trim. GRIT aesthetic — opposite of the retired Walnut's
gilded refinement.
v335: Ember promoted from optional theme to :root default. Walnut
tokens removed entirely; this block is the new baseline that
every other theme inherits from until overriding.
============================================================ */
:root, [data-theme="smoke"] {
/* Surfaces — soot-black brick walls */
--bg: #0e0a08;
--bg-2: #1a1410;
--bg-deep: #050302;
--surface: #241c16;
--surface-2: #2e251e;
--surface-3: #3a3026;
--paper: #e8dcc0;
/* Type — vellum on soot. Body ink AA 12+:1 on bg.
v237 — --ink-faint lightened from #6c5e4c (~4.4:1, borderline AA)
to #786a58 (~5.2:1, comfortable AA). */
--ink: #e8dcc0;
--ink-bright: #f5e8c4;
--ink-dim: #a0907a;
--ink-faint: #786a58;
/* Hairlines — burnt seam + candle glow */
--rule: #2a2018;
--rule-strong: #4a3a2a;
--rule-faint: rgba(217, 115, 36, 0.20);
--rule-gold: rgba(217, 115, 36, 0.60);
/* Accents — candle-flame amber */
--brass-light: #e8923c;
--accent: #d97324;
--accent-2: #e8923c;
--accent-soft: #3a200c;
--brass: #d97324;
--brass-deep: #8a4612;
--gold-foil: linear-gradient(135deg, #e8923c 0%, #d97324 30%, #8a4612 60%, #f5a854 100%);
/* Mood — crimson leather banquette, graphite trim */
--maraschino: #8a1c1c;
--maraschino-2: #a83030;
--burgundy: #5a1010;
--bottle: #3a3530;
--bottle-2: #524d48;
--absinthe: #d97324;
--copper: #d97324;
--rose-gold: #e8923c;
--neon-amber: #f5a854;
--red: #8a1c1c;
/* Spirit bands — flame-warm */
--spirit-whiskey: #e0a050;
--spirit-gin: #889680;
--spirit-rum: #c89060;
--spirit-agave: #9aa080;
--spirit-brandy: #d68a50;
--spirit-vodka: #b0b0a8;
--spirit-liqueur: #b0788c;
--spirit-aperitif: #d65848;
--spirit-vermouth: #c87480;
--spirit-wine: #8a1c1c;
--spirit-multi: #e0a050;
/* Display — sharp humanist serif, ornament: ✦ flame star */
--serif-display: "Sentinel", "Hoefler Text", "Bodoni 72", Georgia, serif;
--radius: 2px;
--ornament-divider: "✦";
--ornament-section: "✦";
--dropcap-color: #d97324;
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.6);
--dropcap-frame-bg: rgba(217, 115, 36, 0.12);
--dropcap-frame-border: 1px solid rgba(217, 115, 36, 0.55);
--dropcap-frame-radius: 2px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
--accent-rgb: 217, 115, 36;
--maraschino-rgb: 138, 28, 28;
--brass-rgb: 217, 115, 36;
--bottle-rgb: 58, 53, 48;
--on-accent: #0e0a08;
--print-edition-name: "Ember";
--section-plate-glyph: "✦";
--section-plate-bg: rgba(217, 115, 36, 0.12);
--section-plate-border: 1px solid rgba(217, 115, 36, 0.50);
--section-plate-radius: 2px;
--section-plate-color: #d97324;
--page-edge-color: rgba(217, 115, 36, 0.55);
/* Texture — soft ember sparks. v235 — palette swap: was Smoke's
#a06a3d amber, now Ember's #d97324 candle amber so the texture
reads as floating sparks rather than stale ash. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 220px 220px;
}
/* ============================================================
v335 — Walnut theme retired entirely.
============================================================
All v327-v334 Walnut-scoped overrides removed: book metaphor
(cards as cream pages, inverted ink, sheets as cream paper),
oxblood active state coverage, hover flash hotfix, sheet-body
token redefinition. Walnut as a data-theme attribute no longer
exists; legacy walnut localStorage values are migrated to smoke
(Ember) by theme.js LEGACY_THEME_MAP. Ember (now :root default)
inherits the gritty speakeasy mood that Walnut couldn't carry
cleanly without conflict against the other warm-dark themes.
============================================================ */
/* ============================================================
THEME — PINEAPPLE (v320, was Tokyo / was Platinum)
Beach bar at noon. Sand-cream ground, dark pineapple-skin
brown for the text, deepened palm green + sunset coral for
the mood notes. The bright pineapple gold lives on as
button/chip fill with the dark brown sitting on it.
The FIRST light theme in Embury — distinct from Aperitivo's
travertine cafe (which is cooler stone) by being warmer and
sandier, with the pineapple-gold accent role.
============================================================ */
[data-theme="platinum"] {
/* v320 — REBUILT as PINEAPPLE. Three iterations to land here:
pass 1 used ocean-teal (rejected — blue belongs to Riviera);
pass 2 went pineapple-skin dark cocoa (still too dark for
"tropical pineapple"); pass 3 (this one) inverts to a LIGHT
theme — sand-cream ground that reads as wet sand at the tide
line in afternoon sun. Dark pineapple-skin brown becomes the
INK rather than the bg. The ripe yellow flesh stays bright but
shifts role from primary accent (legible against dark) to
fill chip color (with dark ink sitting on it); the primary
accent token deepens to caramelized pineapple for legibility
against the cream ground. Palm green and sunset coral also
deepen so they don't wash out on cream.
Internal id stays "platinum" so users who had Tokyo selected
keep their slot (they just see the new look on next paint). */
/* Surfaces — sand cream. Warm, NO blue, NO gray. Distinct from
Aperitivo's travertine (which has cool stone undertones). */
--bg: #f5e8c8; /* warm sand cream */
--bg-2: #fbeed0; /* lifted sand */
--bg-deep: #e8d8b0; /* compressed sand / wet tide line */
--surface: #fdf3d8; /* sunlit panel */
--surface-2: #fff8e0; /* highest noon light */
--surface-3: #f0e0b8; /* shaded panel */
--paper: #ffffff; /* clean printed menu */
/* Type — pineapple-skin brown on sand. AA 9.5:1 on bg.
v320 pass-4: ink-dim + ink-faint darkened so captions, hints,
and timestamps stop fading into the cream. Old ink-faint
(#7a6a52) sat right at AA borderline; new one is 6:1. */
--ink: #2a1f10; /* pineapple-skin brown */
--ink-bright: #160a04; /* deepest for emphasis */
--ink-dim: #3a2d18; /* captions — AA 8:1 */
--ink-faint: #5a4a30; /* hints — AA 6:1, was 4.1 */
/* Hairlines — caramel-pineapple on sand. Visible enough to
organize, never enough to interrupt. v320 pass-4: stronger
opacity so dividers don't disappear. */
--rule: #e0cc94; /* sand fade with more body */
--rule-strong: #b89860; /* darker, scannable divider */
--rule-faint: rgba(196, 86, 28, 0.28);
--rule-gold: rgba(196, 86, 28, 0.60);
/* Accents — v320 pass-5: PRIMARY FLIPS TO PALM LEAF GREEN.
User feedback + Chief Designer Maya Lin-Okonkwo verdict:
"A pineapple is 70% leaf by volume; the crown is what makes
the silhouette legible at a glance. Orange-as-primary was
reading 'sunset cocktail,' not 'pineapple.' Green-as-primary
plus orange-as-accent is the actual fruit." So the hero
accent becomes deep palm leaf (#2a8a1f — Maya's exact pick:
warm enough to read 'sun-hit crown,' deep enough to hold
legibility on cream).
Sunset orange (#c4561c) demoted from primary → secondary
atmospheric highlight (favorite stars, incidental pops).
--brass-light / --brass stay bright pineapple flesh
(#f5c842) for chip + button fills.
--on-accent flips to cream for text on the new green primary
button surface; compass-chip warm-fill gets a one-line
override below the block since it was the only consumer
that needed dark text on yellow. */
--brass-light: #f5c842; /* bright pineapple — fill chips */
--accent: #2a8a1f; /* deep palm leaf — primary */
--accent-2: #3aa024; /* sunlit palm */
--accent-soft: #d8eed0; /* pale palm halo */
--brass: #f5c842;
--brass-deep: #a87810; /* deep caramel */
/* Gradient stays gilt (the gold-foil metaphor matters across
themes); represents the pineapple flesh + caramelized edge. */
--gold-foil: linear-gradient(135deg, #fdd668 0%, #f5c842 30%, #a87810 70%, #fbeec0 100%);
/* Mood — v320 pass-5: GREEN OWNS THE ATMOSPHERE.
Bottle is a slightly cooler palm (variety against accent).
Sunset coral lives in maraschino/copper for that single pop
against the leaf hero. */
--maraschino: #c4561c; /* sunset coral — secondary highlight */
--maraschino-2: #e26a28; /* lifted sunset */
--burgundy: #7a2810; /* deep sunset shadow */
--bottle: #1f7014; /* deep frond — varies the palm */
--bottle-2: #3aa024; /* sunlit frond — matches accent-2 */
--absinthe: #a8c818; /* saturated lime */
--copper: #e8542a; /* vivid sunset orange */
--rose-gold: #e87a4a; /* hibiscus blush */
--neon-amber: #f5b81c; /* pineapple glow */
--red: #c8281c; /* vivid hibiscus red */
/* Spirit-coded bands — Pineapple retune, palm-primary edition.
Gin gets the hero palm-leaf accent (palette match). Rum +
aperitif own the sunset/coral band. Whiskey stays gold but
a real amber (not the bright pineapple flesh) so it doesn't
blur with the brass chip fills. */
--spirit-whiskey: #c89018; /* deep amber whiskey */
--spirit-gin: #2a8a1f; /* palm leaf — palette match */
--spirit-rum: #c4561c; /* cane-sugar sunset — tiki's home spirit */
--spirit-agave: #a8c818; /* saturated agave lime */
--spirit-brandy: #a8581c; /* coconut husk */
--spirit-vodka: #6a5e48; /* warm gray */
--spirit-liqueur: #b8385c; /* vivid hibiscus pink */
--spirit-aperitif: #e8542a; /* sunset coral */
--spirit-vermouth: #9a2c4a; /* rose-hibiscus */
--spirit-wine: #7a1c1c; /* tropical claret */
--spirit-multi: #2a8a1f; /* palm — palette match */
/* Display face + geometry — Iowan Old Style with a Georgia/Cambria
fallback chain. Friendlier and slightly hand-set, matching a
Polynesian-menu feel without going into novelty-tiki territory.
Slightly rounder corners than Tokyo's lacquer-sharp 1px — a
softer tropical feel, but still book-like. */
--serif-display: "Iowan Old Style", "Georgia", "Cambria", "Times New Roman", serif;
--radius: 4px;
/* Ornament — hibiscus glyph. The single flower on the bartender's
ear. Distinct from Tokyo's enso ring and Onyx's mid-dot. */
--ornament-divider: "❁";
--ornament-section: "✿";
--dropcap-color: #2a8a1f; /* palm leaf */
--dropcap-shadow: 0 1px 0 rgba(245, 232, 200, 0.65);
/* Illuminated initial frame — palm leaf rim. */
--dropcap-frame-bg: rgba(42, 138, 31, 0.08);
--dropcap-frame-border: 1px solid rgba(42, 138, 31, 0.50);
--dropcap-frame-radius: 4px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
/* Atmosphere RGB tokens — palm leaf primary, sunset secondary. */
--accent-rgb: 42, 138, 31; /* palm leaf — hero */
--maraschino-rgb: 196, 86, 28; /* sunset coral — secondary */
--brass-rgb: 245, 200, 66; /* bright pineapple (fills) */
--bottle-rgb: 31, 112, 20; /* deep frond */
/* --on-accent — text on the palm-leaf primary surface (buttons,
pills, etc.). Cream-on-leaf hits AA 4.7:1. The bright pineapple
chip fill (--brass-light) still wants DARK brown text on top —
handled by the .compass-chip override below the block since it
was the only consumer of --on-accent against --brass-light. */
--on-accent: #f5e8c8;
/* v320 — Scrim overrides for Pineapple (light theme). The dark-
theme default rgba(0,0,0,0.78) overpowers a sand-cream UI;
use a warm dark-brown semi-translucent that focuses attention
on the sheet without nuking the page. */
--scrim: rgba(42, 31, 16, 0.62);
--scrim-soft: rgba(42, 31, 16, 0.22);
/* Vignette — warm low-alpha tint instead of black wash. */
--vignette: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(168, 120, 16, 0.10) 100%);
--print-edition-name: "Pineapple";
/* Section plate — hibiscus marker against palm green rim. Maya:
"coral-on-leaf is the most tropical color pairing in existence.
The hibiscus earns its pop precisely because the hero is green." */
--section-plate-glyph: "✿";
--section-plate-bg: rgba(42, 138, 31, 0.08);
--section-plate-border: 1px solid rgba(42, 138, 31, 0.50);
--section-plate-radius: 4px;
--section-plate-color: #c4561c; /* hibiscus on a leaf rim */
/* Page-edge gilding — palm leaf hairline on cocktail cards. */
--page-edge-color: rgba(42, 138, 31, 0.55);
/* Texture — palm-frond grain on sand. Palm-green strokes
dominate (it's the hero color now); sunset coral flecks
add the secondary pop. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 200px 200px;
}
/* v320 pass-5 — Compass chip override for Pineapple.
The .compass-chip.on[data-group="warm"] fill uses --brass-light
(#f5c842 bright pineapple) with text color set to var(--on-accent).
For all other themes that's fine (their --on-accent is a dark
surface color). For Pineapple, --on-accent is now CREAM (designed
for the palm-green button surface), and cream-on-yellow is
unreadable. Override to dark pineapple-skin brown here. */
[data-theme="platinum"] .compass-chip.on[data-group="warm"] {
color: #2a1f10;
}
/* v320 pass-6 — Pineapple-anatomy header. User insight: "why not
change the header to pineapple brown and golden yellow?" — much
sharper than the cream-on-cream first attempt. Plays the actual
fruit's anatomy: rough golden-brown skin wraps the top, bright
sand-cream flesh fills the body below. Brand wordmark, tab
labels, nav glyphs all render in golden pineapple flesh on
the skin-brown header strip. Inactive tabs use a muted gold
so the active tab pops; active tab gets the brighter flesh
color with a palm-leaf underline.
The global .app-header rule hardcodes a near-black gradient
that works for the 11 dark themes but reads as a jarring
strip on light themes. Override block below pins Pineapple's
header to the pineapple-skin palette + flesh-gold typography. */
[data-theme="platinum"] .app-header {
/* v330 — Pineapple skin cross-hatch texture.
----------------------------------------------------------
v329 attempted this with `background:` shorthand; the SVG
layer was silently dropped by the cascade (proven by inline-
style test that confirmed the SVG renders correctly). Rewrote
using `background-color` + `background-image` longhand which
splits responsibilities cleanly and gives our two-layer image
stack its own dedicated property without competing with any
parent .app-header background: shorthand reset later in the
cascade. Same diamond cross-hatch overlay (caramel #c8a45c
stroke at 0.20 alpha) over the brown skin gradient.
*/
background-color: #2a1f10;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #3a2d18 0%, #2a1f10 100%);
background-size: 18px 18px, auto;
background-repeat: repeat, no-repeat;
box-shadow:
0 1px 0 rgba(42, 138, 31, 0.35),
0 2px 0 rgba(245, 200, 66, 0.10),
0 8px 20px rgba(20, 14, 6, 0.20);
}
/* Brand block — wordmark + tagline in pineapple gold on the skin. */
[data-theme="platinum"] .app-header .brand-name {
color: #f5c842;
}
[data-theme="platinum"] .app-header .brand-tagline {
color: #c89018;
}
[data-theme="platinum"] .app-header .brand-chevron {
color: #c89018;
}
[data-theme="platinum"] .app-header .brand-mark {
color: #f5c842;
border-color: rgba(245, 200, 66, 0.65);
}
/* Top-nav tabs — muted gold inactive, bright gold active, with
palm-leaf underline reused from the global .tab.active rule
(which uses --accent — already palm-green for Pineapple). */
[data-theme="platinum"] .app-header .tab {
color: #c89018;
}
[data-theme="platinum"] .app-header .tab:hover {
color: #fdd668;
}
[data-theme="platinum"] .app-header .tab.active {
color: #f5c842;
}
/* Settings gear icon — same gold treatment, palm green on focus. */
[data-theme="platinum"] .app-header .tab-settings {
color: #c89018;
}
[data-theme="platinum"] .app-header .tab-settings:hover {
color: #f5c842;
}
/* v320 pass-7 — Aperitivo header override (same pattern as Pineapple).
Aperitivo is Embury's other light theme — travertine cream ground
with Campari-red accent and terrazzo-plum secondary. The global
.app-header rule hardcodes a near-black gradient that lands as
a jarring strip above the cream body, identical to the Pineapple
problem. Pineapple's anatomy metaphor (pineapple skin wrapping the
crown-flesh) translates here as "Negroni glass against travertine"
— a deep amaro-brown header strip above the cream cafe interior.
Cream wordmark on the deep ground, muted terracotta tabs, lifted
coral on active. */
[data-theme="ivory"] .app-header {
/* v330 — Aperitivo: Negroni-glass crystal-cut striations.
----------------------------------------------------------
Same shorthand-vs-longhand fix as Pineapple. Pairing texture
overlay (vertical etched lines evoking cut-crystal Negroni
glass) over the dark amaro-brown gradient. Caramel-tan
stroke at 0.18 alpha — felt, not seen. */
background-color: #2c0e08;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #4a1c12 0%, #2c0e08 100%);
background-size: 28px 12px, auto;
background-repeat: repeat, no-repeat;
box-shadow:
0 1px 0 rgba(168, 56, 32, 0.35),
0 2px 0 rgba(244, 236, 214, 0.08),
0 8px 20px rgba(20, 10, 6, 0.22);
}
[data-theme="ivory"] .app-header .brand-name {
color: #f4ecd6;
}
[data-theme="ivory"] .app-header .brand-tagline {
color: #c89880;
}
[data-theme="ivory"] .app-header .brand-chevron {
color: #c89880;
}
[data-theme="ivory"] .app-header .brand-mark {
color: #f4ecd6;
border-color: rgba(244, 236, 214, 0.55);
}
[data-theme="ivory"] .app-header .tab {
color: #c89880;
}
[data-theme="ivory"] .app-header .tab:hover {
color: #f4ecd6;
}
[data-theme="ivory"] .app-header .tab.active {
color: #e8a888;
}
[data-theme="ivory"] .app-header .tab-settings {
color: #c89880;
}
[data-theme="ivory"] .app-header .tab-settings:hover {
color: #f4ecd6;
}
/* ============================================================
v336 — Header textures for Ember + Mezcal
============================================================
Continuing the material-identity work that started with
Pineapple (cross-hatch skin) and Aperitivo (Negroni glass
striations). Each theme's app-header gets a subtle texture
overlay that reinforces its name. Same pattern: longhand
background-image to avoid the v330 shorthand-cascade bug.
EMBER (default): warm amber spark dots, like cinders drifting
up from the candle flames in a speakeasy basement. Color
matches --accent; very low alpha so it whispers.
MEZCAL: warm gray concrete speckle. Mezcal's metaphor is the
smoke-cellar concrete walls; this texture suggests rough-poured
concrete grit under the dark header bar.
============================================================ */
[data-theme="smoke"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 60px 60px, auto;
background-repeat: repeat, no-repeat;
}
[data-theme="verdant"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 50px 50px, auto;
background-repeat: repeat, no-repeat;
}
/* ============================================================
v337 — Header textures for remaining dark themes
============================================================
Onyx intentionally skipped — industrial monochrome means no
texture by design. Habana, Amber, Boudoir, Fireside, Velvet
each get a material-identity overlay matching their metaphor.
============================================================ */
/* AMBER — rum hold ship's deck. Horizontal cask-stave hairlines
in amber, evoking the planks of a rum hold. */
[data-theme="amber"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 80px 12px, auto;
background-repeat: repeat, no-repeat;
}
/* BOUDOIR — black satin wall. Single-direction diagonal sheen
lines in rose-gold, evoking the directional luster of satin. */
[data-theme="rose"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 40px 40px, auto;
background-repeat: repeat, no-repeat;
}
/* FIRESIDE — pine paneling. Vertical wood-grain hairlines in
brass, evoking the pine planks of a ski-lodge bar. */
[data-theme="lodge"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 50px 20px, auto;
background-repeat: repeat, no-repeat;
}
/* VELVET — cabaret curtain. Dense vertical pile lines in
crimson, evoking the directional pile of stage velvet. */
[data-theme="velvet"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 20px 12px, auto;
background-repeat: repeat, no-repeat;
}
/* HABANA — tropical poster bar. Rattan crossweave in red
leather + brass, evoking the woven wicker of a Caribbean bar. */
[data-theme="copper"] .app-header {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(14,13,12,0.98) 0%, rgba(10,9,8,0.96) 100%);
background-size: 30px 30px, auto;
background-repeat: repeat, no-repeat;
}
/* ============================================================
THEME — MEZCAL (v265, was Verdant)
Oaxacan smoke cellar. Concrete walls, oxblood drape, obsidian
glassware, agave in clay pots. The opposite of Habana's bright
tropical poster bar — this is urban, smoky, grittier.
============================================================ */
[data-theme="verdant"] {
/* Surfaces — smoke-stained charcoal with a warm olive undertone.
Distinct from Onyx's cool near-black: this is WARM and slightly
organic, like concrete that's absorbed years of mezcal smoke. */
--bg: #1a1612; /* smoke-stained charcoal */
--bg-2: #221d18; /* lifted */
--bg-deep: #100b08; /* the cellar shadow */
--surface: #2a221c; /* concrete panel */
--surface-2: #34291f; /* lit concrete */
--surface-3: #3e3225; /* top-lit */
--paper: #ede0c4; /* old menu paper, sun-yellowed */
/* Type — bone-cream on smoke. Warmer than Onyx. */
--ink: #ece0c4; /* parchment, slight tobacco */
--ink-bright: #f4ead0; /* lifted */
--ink-dim: #a0907a; /* dim */
--ink-faint: #7a6c58; /* faded, AA 5.5:1 on bg */
/* Hairlines — oxblood-tinged, very faint */
--rule: #2a221c;
--rule-strong: #3e3225;
--rule-faint: rgba(224, 90, 68, 0.20);
--rule-gold: rgba(224, 90, 68, 0.55);
/* Accents — OXBLOOD-LEANING TERRACOTTA, lifted from the
original-cellar oxblood (#a83a30) to hit AA contrast on the
smoke-charcoal bg. The wine-blood mood is preserved at the
base of the gradient (--brass-deep, --accent-soft) but the
hero hue is lifted for legibility — eyebrows and links in
accent color now read AA 4.9:1 on bg. Distinct from Habana's
poster red (brighter, cleaner) — this is deeper, dusted with
smoke. */
--brass-light: #f08068; /* lifted terracotta */
--accent: #e05a44; /* lifted oxblood — AA 4.86:1 */
--accent-2: #f08068;
--accent-soft: #401412;
--brass: #e05a44;
--brass-deep: #8a2820; /* original oxblood, kept for shadow */
--gold-foil: linear-gradient(135deg, #f08068 0%, #e05a44 30%, #8a2820 60%, #f4a08c 100%);
/* Mood — agave green, terracotta, smoke. The Oaxaca palette. */
--maraschino: #7a3a2a; /* terracotta */
--maraschino-2: #94483a;
--burgundy: #4a1c14; /* deep terracotta */
--bottle: #5a6b3e; /* agave green */
--bottle-2: #748450;
--absinthe: #8a9a4a; /* lighter agave */
--copper: #b87a3a; /* copper still */
--rose-gold: #c88260;
--neon-amber: #d8a868; /* glow off a copal candle */
--red: #e05a44; /* oxblood-terracotta, palette match */
/* Spirit-coded bands — Mezcal retune. Agave/mezcal gets the
hero color treatment. Whiskey deeper-amber. */
--spirit-whiskey: #b87440;
--spirit-gin: #6a8a4a; /* fresh agave herb */
--spirit-rum: #b08850;
--spirit-agave: #8aa050; /* sage-agave, palette match */
--spirit-brandy: #b07050;
--spirit-vodka: #a8a098; /* warm grey */
--spirit-liqueur: #9060a0;
--spirit-aperitif: #c85a50;
--spirit-vermouth: #a04848;
--spirit-wine: #6a1f1a; /* deep red */
--spirit-multi: #e05a44; /* lifted oxblood, palette match */
/* Display face — Hoefler Text. Heavy serif with editorial weight,
suits a smoke-cellar with gravitas. Distinct from Habana's Caslon
(lighter / sun-poster) and Walnut's Iowan (refined-warm). */
--serif-display: "Hoefler Text", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
--radius: 3px; /* slightly handmade / irregular */
/* Ornament — ✼ eight-pointed asterism. Evokes an agave bloom or a
copal-incense star. Distinct from every other theme. */
--ornament-divider: "✼";
--ornament-section: "✼";
--dropcap-color: #e05a44;
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.55);
/* Dropcap frame — terracotta brick edge */
--dropcap-frame-bg: rgba(224, 90, 68, 0.10);
--dropcap-frame-border: 1px solid rgba(224, 90, 68, 0.55);
--dropcap-frame-radius: 3px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
/* RGB tokens */
--accent-rgb: 224, 90, 68;
--maraschino-rgb: 122, 58, 42;
--brass-rgb: 224, 90, 68;
--bottle-rgb: 90, 107, 62;
--on-accent: #ece0c4; /* cream on terracotta */
--print-edition-name: "Mezcal";
--section-plate-glyph: "✼";
--section-plate-bg: rgba(224, 90, 68, 0.12);
--section-plate-border: 1px solid rgba(224, 90, 68, 0.50);
--section-plate-radius: 3px;
--section-plate-color: #f08068;
--page-edge-color: rgba(224, 90, 68, 0.55);
/* Texture — concrete pour. Irregular specks at varying sizes,
no straight lines. Distinct from any other theme's pattern. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 180px 180px;
}
/* ============================================================
THEME — Smuggler's Cove
San Francisco. Rum den / ship's hold.
Three-level themed bar (rum den, shipwreck, navy galleon).
Dark wood walls, brass nautical fittings, rope, parchment,
candlelight. Modern tiki authority — tasteful, not kitsch.
This is the spiritual successor to the v54 Tiki Sunset palette.
============================================================ */
[data-theme="amber"] {
/* Surfaces — nautical teal-wood */
--bg: #0f2230; /* deep nautical teal */
--bg-2: #1a3142; /* lifted teal-wood */
--bg-deep: #061521; /* deepest hold shadow */
--surface: #2a4555; /* foliage teal */
--surface-2: #34556a; /* lit teal */
--surface-3: #426a82; /* top-lit teal */
--paper: #fff2d8; /* candle cream */
/* Type — rum-soaked parchment on hold-dark */
--ink: #f3e3c5; /* rum-soaked parchment */
--ink-bright: #fff2d8; /* candle cream */
--ink-dim: #c4ad88; /* aged sail */
--ink-faint: #957f5e; /* faded ink, AA 5.5:1 */
/* Hairlines — rum amber rules */
--rule: #2a4555; /* foliage rule */
--rule-strong: #426a82; /* lifted rule */
--rule-faint: rgba(214, 132, 61, 0.20);
--rule-gold: rgba(212, 165, 52, 0.50);
/* Accents — rum amber + sunset coral + doubloon gold */
--brass-light: #e89a55; /* light amber */
--accent: #d6843d; /* rum amber */
--accent-2: #e89a55; /* light amber echo */
--accent-soft: #5a3018; /* amber shadow */
--brass: #d4a534; /* doubloon gold */
--brass-deep: #8a6a1a; /* dark gold */
--gold-foil: linear-gradient(135deg, #e89a55 0%, #d6843d 30%, #d4a534 60%, #f0b878 100%);
/* Mood — sunset coral + palm green */
--maraschino: #c54a3f; /* sunset coral */
--maraschino-2: #d8604a; /* lit coral */
--burgundy: #6b1a1a; /* deep ember */
--bottle: #2d6e60; /* palm green */
--bottle-2: #4a8a76; /* lifted palm */
--absinthe: #d4a534; /* doubloon gold */
--copper: #d6843d; /* rum amber */
--rose-gold: #e89a78; /* rose gold */
--neon-amber: #d4a534; /* doubloon */
--red: #c54a3f; /* coral, palette match */
/* Spirit-coded bands — Smuggler's Cove retune. Rum gets the
richest treatment (this is the rum den), spirits feel
candlelit + sun-baked. */
--spirit-whiskey: #d6843d; /* rum amber, palette match */
--spirit-gin: #5db89a; /* emerald */
--spirit-rum: #e8b56a; /* golden caramel — featured spirit */
--spirit-agave: #7cc068; /* palm */
--spirit-brandy: #d8704a; /* rose-gold */
--spirit-vodka: #a8c4d8; /* silver-blue */
--spirit-liqueur: #b06ac8; /* violet */
--spirit-aperitif: #d85a72; /* coral pink */
--spirit-vermouth: #d8607a; /* cherry rose */
--spirit-wine: #c0506a; /* cherry */
--spirit-multi: #d4a534; /* doubloon, palette match */
/* Display face + geometry */
--serif-display: "Bodoni 72", "Didot", "Hoefler Text", "Iowan Old Style", Georgia, serif;
--radius: 3px; /* weathered wood softness */
/* Ornament — compass star */
--ornament-divider: "✦";
--ornament-section: "✦";
--dropcap-color: #d6843d; /* rum amber */
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.5);
/* v66 — illuminated initial frame. Smuggler's Cove gets a
compass-rose stamp: weathered amber border, full pill radius
(50%) so the frame reads as a ship's seal/oval, with four-point
compass-star glyphs (✦) at top-left and bottom-right. */
--dropcap-frame-bg: rgba(214, 132, 61, 0.10);
--dropcap-frame-border: 1.5px solid rgba(214, 132, 61, 0.60);
--dropcap-frame-radius: 50%;
--dropcap-ornament-pre: "✦";
--dropcap-ornament-post: "✦";
/* Atmosphere RGB tokens — rum amber sun + sunset coral + palm tints */
--accent-rgb: 214, 132, 61; /* rum amber */
--maraschino-rgb:197, 74, 63; /* sunset coral */
--brass-rgb: 212, 165, 52; /* doubloon gold */
--bottle-rgb: 45, 110, 96; /* palm green */
/* Ink-on-amber — rum amber is bright/warm, deep teal reads well */
--on-accent: #0f2230; /* nautical teal */
/* v65 — printed spec card edition name. */
--print-edition-name: "Amber";
/* v74 — section-head plate. Smuggler's Cove gets a compass medallion:
four-point compass star in a weathered amber oval (pill radius). */
--section-plate-glyph: "✦";
--section-plate-bg: rgba(214, 132, 61, 0.12);
--section-plate-border: 1px solid rgba(214, 132, 61, 0.55);
--section-plate-radius: 50%;
--section-plate-color: #e89a55;
/* v74 — page-edge gilding. Doubloon gold on the right edge of
cocktail cards — the brass-bound edge of a ship's logbook. */
--page-edge-color: rgba(212, 165, 52, 0.60);
/* v74 — per-binding background texture. Smuggler's Cove gets weathered
wood grain: anisotropic turbulence stretched horizontally, tinted
rum amber. Ship's hold planking, very low alpha. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 400px 140px;
}
/* ============================================================
THEME — Onyx (v109, Wave 44)
Monochromatic. Charcoal + bone + graphite + smoke.
Brutalist precision. Display face is a clean grotesque, not
a serif — the only binding without ornament-as-decoration.
The ornament IS the typography (the discipline IS the mood).
Mid-dot · for divider/section so the page reads as
typographic restraint, not editorial flourish.
============================================================ */
[data-theme="onyx"] {
/* v124 Wave 75 — refined Onyx. The v109 version skewed warm (#161614 has
more red than blue in the channel) which made "monochrome" read as
"dimly-lit walnut" on OLED screens. This rebuild commits to a cool
near-black core (#121417) with slightly bluer graphites and a brighter,
less yellow bone for ink. Inspired by Tom Sachs / muji / Aesop —
industrial monochrome, not muddy darkroom. */
/* Surfaces — onyx core, cool graphite lift */
--bg: #121417; /* cool near-black, slight blue */
--bg-2: #1a1d21; /* lifted graphite */
--bg-deep: #08090b; /* deepest shadow */
--surface: #1f2329; /* card panel */
--surface-2: #2a2f36; /* lit panel */
--surface-3: #3a4048; /* top-lit panel */
--paper: #f0eee8; /* cool bone paper */
/* Type — cool bone on onyx. Brighter top end for OLED-pop legibility. */
--ink: #ebe9e2; /* cool bone */
--ink-bright: #ffffff; /* pure white for emphasis */
--ink-dim: #9b9aa0; /* mid graphite, slightly cool */
--ink-faint: #6c6e74; /* faded graphite, AA 5.4:1 on bg */
/* Hairlines — graphite seam at low alpha so they don't crowd */
--rule: #2a2f36; /* graphite seam */
--rule-strong: #4a505a; /* highlighted seam */
--rule-faint: rgba(235, 233, 226, 0.08);
--rule-gold: rgba(235, 233, 226, 0.36); /* "gold" = bone here */
/* Accents — pure bone, no warm cast. Two-step contrast for hierarchy. */
--brass-light: #ffffff; /* pure white */
--accent: #ebe9e2; /* cool bone — primary */
--accent-2: #b8b7b0; /* mid bone */
--accent-soft: #1f2329; /* graphite shadow */
--brass: #ebe9e2; /* cool bone */
--brass-deep: #7a7d83; /* deep graphite */
--gold-foil: linear-gradient(135deg, #ffffff 0%, #ebe9e2 30%, #7a7d83 60%, #ffffff 100%);
/* Mood — true greyscale family. Warm-red maraschino becomes a graphite
pulse; bottle green becomes blue-slate. No color, no warmth bleed. */
--maraschino: #5a606a; /* mid graphite */
--maraschino-2: #6e757f; /* lit graphite */
--burgundy: #2a2f36; /* deep graphite */
--bottle: #3e444d; /* cool slate */
--bottle-2: #5a606a; /* lifted slate */
--absinthe: #8a8c92; /* mid bone-gray */
--copper: #82847a; /* pewter (not warm copper) */
--rose-gold: #c4c2bc; /* light cool gray */
--neon-amber: #b8b7b0; /* mid bone */
--red: #7a7d83; /* deep graphite (no red) */
/* Spirit bands — true grayscale with the slightest hint of differentiation
by temperature (whiskey/rum slightly warm, gin/agave slightly cool).
Saturation kept under 8% so the eye reads them as gray + tone. */
--spirit-whiskey: #aaa49a; /* warm gray, just barely */
--spirit-gin: #9aa4ac; /* cool gray */
--spirit-rum: #a8a094; /* sand gray */
--spirit-agave: #98a89c; /* olive gray */
--spirit-brandy: #aaa098; /* dust gray */
--spirit-vodka: #c4c2bc; /* bright silver */
--spirit-liqueur: #a098a4; /* lavender gray */
--spirit-aperitif: #aa9aa0; /* mauve gray */
--spirit-vermouth: #a89aa6; /* violet gray */
--spirit-wine: #8e7e82; /* wine gray */
--spirit-multi: #b8b7b0; /* mid bone */
/* Display face + geometry — clean grotesque, near-zero radius */
--serif-display: "Inter", "Helvetica Neue", "Akzidenz-Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--radius: 1px; /* sharp, but a hair softer than Deco */
/* Ornament — minimalist mid-dot. No fleuron, no flower, no compass. */
--ornament-divider: "·";
--ornament-section: "·";
--dropcap-color: #e8e6df; /* bone */
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.4);
/* Illuminated initial frame — bare-bones thin box, no ornament */
--dropcap-frame-bg: rgba(232, 230, 223, 0.05);
--dropcap-frame-border: 1px solid rgba(232, 230, 223, 0.45);
--dropcap-frame-radius: 1px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
/* Atmosphere — cool bone glow on onyx, no warm tint */
--accent-rgb: 235, 233, 226;
--maraschino-rgb: 90, 96, 106;
--brass-rgb: 235, 233, 226;
--bottle-rgb: 62, 68, 77;
/* Ink-on-bone — bone accent is light, onyx reads well */
--on-accent: #121417;
--print-edition-name: "Onyx";
/* Section-head plate — minimalist square. Hair-line bone stroke. */
--section-plate-glyph: "·";
--section-plate-bg: rgba(232, 230, 223, 0.06);
--section-plate-border: 1px solid rgba(232, 230, 223, 0.40);
--section-plate-radius: 1px;
--section-plate-color: #e8e6df;
--page-edge-color: rgba(232, 230, 223, 0.45);
/* Texture — very faint paper grain, no warm tint. Bone particles at low
alpha so the surface reads as matte cardstock, not glossy. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 160px 160px;
}
/* ============================================================
THEME — BOUDOIR (v265, was Rosé)
Private members-only nightclub at 2am. Black satin walls,
rose-gold trim, claret velvet banquette, gilded mirrors,
pendant lamp burning low. Distinct from Velvet's burlesque
stage (which is theatrical / shouty) — Boudoir is intimate,
whispered. The femme jewel-box audience but with bite.
Display: Didot upright. Ornament: ❦ (fleuron heart).
============================================================ */
[data-theme="rose"] {
/* Surfaces — matte ink black, not wine plum. The deep-shadow
palette of an after-hours lounge where the walls disappear
and only the rose-gold trim catches the light. */
--bg: #0a0608; /* matte ink — the after-hours lounge */
--bg-2: #14090e; /* lifted ink */
--bg-deep: #050203; /* pure shadow */
--surface: #1a0e14; /* claret-tinted panel */
--surface-2: #221318; /* lit claret */
--surface-3: #2c1a22; /* top-lit */
--paper: #f0e8dc; /* warm ivory menu card */
/* Type — warm ivory on ink. The shimmer of a pendant lamp on a
printed cocktail list. */
--ink: #f0e8dc; /* warm ivory */
--ink-bright: #faf2e6;
--ink-dim: #b09a8a; /* dusk */
--ink-faint: #807060; /* faded ivory, AA 5.4:1 */
/* Hairlines — rose-gold trim seam, almost invisible */
--rule: #1a0e14;
--rule-strong: #2c1a22;
--rule-faint: rgba(212, 144, 106, 0.18);
--rule-gold: rgba(212, 144, 106, 0.55);
/* Accents — true rose gold + claret. The whole binding turns on the
rose-gold reading off black satin, like a champagne flute caught
in a sliver of light. */
--brass-light: #e8a886; /* lit rose gold */
--accent: #d4906a; /* rose gold — the hero */
--accent-2: #e8a886;
--accent-soft: #2c1a22;
--brass: #d4906a;
--brass-deep: #8a5238; /* deep rose copper */
/* Polished gradient — rose gold leaf, more metallic than Walnut's */
--gold-foil: linear-gradient(135deg, #f4cdae 0%, #e8a886 25%, #d4906a 50%, #8a5238 80%, #f4cdae 100%);
/* Mood — claret velvet, smoke, mauve. Deep saturated jewel tones. */
--maraschino: #8a2840; /* claret */
--maraschino-2: #a4385a; /* lit claret */
--burgundy: #4a0c1c; /* deep claret */
--bottle: #5a3a3a; /* smoke gray with warm undertone */
--bottle-2: #745050;
--absinthe: #d4906a; /* rose gold */
--copper: #c0784a;
--rose-gold: #d4906a; /* primary rose gold */
--neon-amber: #e8a886; /* lit rose gold */
--red: #8a2840; /* claret, palette match */
/* Spirit bands — anchored on rose-gold + claret. Whiskey takes rose
gold (palette match). Wine is claret. Gin leans dusty olive for
contrast without breaking the jewel-tone mood. */
--spirit-whiskey: #d4906a; /* rose gold, palette match */
--spirit-gin: #98a890; /* dusty olive */
--spirit-rum: #d08868; /* warm rose copper */
--spirit-agave: #a8a890; /* warm olive */
--spirit-brandy: #c08068;
--spirit-vodka: #d0b8a8; /* champagne silver */
--spirit-liqueur: #a070a0; /* mauve lavender */
--spirit-aperitif: #c84878; /* claret blush */
--spirit-vermouth: #a85870; /* dusty mauve */
--spirit-wine: #4a0c1c; /* deep claret */
--spirit-multi: #e8a886; /* lit rose gold */
/* Display face — Didot, the natural typeface for fashion editorial.
Upright (not italic — Velvet keeps the italic for cabaret theatrics).
Boudoir is composed; Velvet is performing. */
--serif-display: "Didot", "Bodoni 72", "Cormorant Garamond", "Hoefler Text", Georgia, serif;
--radius: 2px; /* sharp jewelers' edges */
/* Ornament — ❦ fleuron heart. Letterpress / printer's mark, NOT a
pastel flower. Distinct from Verdant's old ❀ and from any other
theme's ornament. Reads as an old book's chapter divider. */
--ornament-divider: "❦";
--ornament-section: "❦";
--dropcap-color: #d4906a; /* rose gold */
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.65);
/* Dropcap frame — thin rose-gold rim */
--dropcap-frame-bg: rgba(212, 144, 106, 0.08);
--dropcap-frame-border: 1px solid rgba(212, 144, 106, 0.55);
--dropcap-frame-radius: 2px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
/* RGB tokens */
--accent-rgb: 212, 144, 106;
--maraschino-rgb: 138, 40, 64;
--brass-rgb: 212, 144, 106;
--bottle-rgb: 90, 58, 58;
--on-accent: #0a0608; /* ink on rose gold */
--print-edition-name: "Boudoir";
/* Section-head plate — small fleuron-marked rectangle */
--section-plate-glyph: "❦";
--section-plate-bg: rgba(212, 144, 106, 0.10);
--section-plate-border: 1px solid rgba(212, 144, 106, 0.50);
--section-plate-radius: 2px;
--section-plate-color: #e8a886;
--page-edge-color: rgba(212, 144, 106, 0.55);
/* Texture — silk weave. Crossed diagonal hairlines very faint to
suggest woven satin. Distinct from every other theme. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 40px 40px;
}
/* v335 — Standalone [data-theme="smoke"] block removed.
Ember's tokens now live in the :root block at the top of this
file (since v335 promoted Ember to the default theme). The old
standalone selector still works because the :root block also
matches [data-theme="smoke"] explicitly. */
/* ============================================================
v335 — RIVIERA theme block (and all marine-scoped overrides
throughout this file) removed. The Mediterranean blue + coral +
cypress palette never differentiated cleanly from Amber's dark-
teal + amber-coral; both occupied the "deep cool bg + warm
secondary" slot. Legacy marine localStorage values are migrated
to amber by theme.js LEGACY_THEME_MAP.
============================================================ */
/* ============================================================
THEME — FIRESIDE (v265, was Lodge/Chesterfield)
Vermont ski-lodge bar at après-ski. The bar attached to a
country inn at 9pm with snow falling outside. Pine paneling,
hunter green carpet, brass lamps, hot-cocoa cups, a wood-
burning stove. Cold-night warmth where Walnut is gilded-formal.
============================================================ */
[data-theme="lodge"] {
/* v265 — REBUILT as FIRESIDE. Was "Chesterfield / Library club" —
conceptually overlapped Walnut (both refined wood-paneled book
rooms). Reframed as the bar attached to a Vermont ski-lodge inn
at après-ski. Pine paneling, hunter green carpet, brass lamps,
hot-cocoa cups, a wood-burning stove. Cold-night warmth where
Walnut is gilded-formal. */
/* Surfaces — pine-needle dark. Cool green-black, distinct from
Walnut's warm brown. A bar attached to a country inn at 9pm
with snow falling outside. */
--bg: #0e1a14; /* pine-needle dark */
--bg-2: #14241c; /* lifted pine */
--bg-deep: #060c08;
--surface: #1c2e22; /* lit pine */
--surface-2: #243a2c;
--surface-3: #2e4a38;
--paper: #f0e6cc; /* aged inn-menu paper */
/* Type — cream linen on pine. */
--ink: #f0e6cc;
--ink-bright: #f8eed4;
--ink-dim: #b8a48c;
--ink-faint: #82725c; /* AA 5.5:1 on bg */
/* Hairlines — brass-on-pine seam */
--rule: #1c2e22;
--rule-strong: #2e4a38;
--rule-faint: rgba(200, 154, 82, 0.18);
--rule-gold: rgba(200, 154, 82, 0.55);
/* Accents — BRASS-ON-PINE. Warmer than Walnut's gold-leaf (which
is yellower) so the two warm themes don't blur. Reads as the
glow of a brass lamp through pine-paneled walls. */
--brass-light: #e0b870; /* lifted brass */
--accent: #c89a52; /* brass-on-pine — hero */
--accent-2: #e0b870;
--accent-soft: #3a2a18;
--brass: #c89a52;
--brass-deep: #8a6a30;
--gold-foil: linear-gradient(135deg, #e8c684 0%, #e0b870 25%, #c89a52 50%, #8a6a30 80%, #e8c684 100%);
/* Mood — hot cocoa, hunter green, snow */
--maraschino: #6a3a28; /* hot cocoa brown */
--maraschino-2: #844a35;
--burgundy: #401e14;
--bottle: #2c4a35; /* hunter green */
--bottle-2: #406854;
--absinthe: #5c7a52; /* mossy pine */
--copper: #b07840; /* warm brass */
--rose-gold: #c8946a;
--neon-amber: #e0b056; /* lamp glow */
--red: #8a2c20; /* lacquer-red drink */
/* Spirit bands — Fireside palette: warm bourbon-and-pine */
--spirit-whiskey: #c89a52; /* brass, palette match */
--spirit-gin: #6a8a6a; /* pine-leaning */
--spirit-rum: #c89060;
--spirit-agave: #80a070;
--spirit-brandy: #c87a50;
--spirit-vodka: #c0bcb0; /* snow */
--spirit-liqueur: #9070a8;
--spirit-aperitif: #d06c50;
--spirit-vermouth: #a06458;
--spirit-wine: #6a1a18;
--spirit-multi: #c89a52; /* brass, palette match */
/* Display face — Charter. Humanist semi-slab, sturdy lodge feel.
Distinct from Walnut's Iowan (more refined) and from Habana's
Caslon (lighter). */
--serif-display: "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
--radius: 4px; /* hand-planed wood softness */
/* Ornament — ✺ sun/flower starburst. Reads as a fire-spark, the
scattered glow of the wood stove. Distinct from every other
theme. */
--ornament-divider: "✺";
--ornament-section: "✺";
--dropcap-color: #c89a52;
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.55);
/* Dropcap frame — brass-rim plate */
--dropcap-frame-bg: rgba(200, 154, 82, 0.08);
--dropcap-frame-border: 1px solid rgba(200, 154, 82, 0.55);
--dropcap-frame-radius: 4px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
/* RGB tokens */
--accent-rgb: 200, 154, 82;
--maraschino-rgb: 106, 58, 40;
--brass-rgb: 200, 154, 82;
--bottle-rgb: 44, 74, 53;
--on-accent: #0e1a14; /* pine on brass */
--print-edition-name: "Fireside";
--section-plate-glyph: "✺";
--section-plate-bg: rgba(200, 154, 82, 0.10);
--section-plate-border: 1px solid rgba(200, 154, 82, 0.50);
--section-plate-radius: 4px;
--section-plate-color: #e0b870;
--page-edge-color: rgba(200, 154, 82, 0.55);
/* Texture — pine plank grain. Long horizontal pine-grain ovals
(taller and thinner than Walnut's mahogany) to evoke vertical
pine paneling rotated horizontally. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 220px 220px;
}
/* ============================================================
THEME — Ivory (v206, Wave 88)
The first LIGHT binding. Day-bar — cream paper walls, sage
wainscoting, brick-red banquette accents, charcoal ink. For
daylight reading on a balcony or pre-shift prep. Every other
theme is dark; this is the only mode-inverted binding.
Display: Big Caslon. Ornament: ❁ (sun-flower variant).
IMPORTANT: This is a light theme. Several tokens flip:
- ink → dark (charcoal); bg → light (cream)
- --rule uses rgba(charcoal, α) instead of a brighter color
- --on-accent flips to cream
The status-bar meta color tracks --bg via theme.js so iOS chrome
stays in sync with the cream surface.
============================================================ */
[data-theme="ivory"] {
/* v265 — PUSHED. Was "Aperitivo" with a generic-cream bg and a soft
Negroni orange accent — felt like a notebook, not specifically
Italian aperitivo. This pass commits to the Milanese cafe at 6pm:
travertine marble walls (warmer cream), true Campari red (deeper),
terrazzo plum chips (existing), AND a real olive-leaf green
(new) so the palette has 4 distinct colors that read together as
a specific bar mood, not abstract "warm light." */
/* Surfaces — travertine marble, warmer than the previous bone-white */
--bg: #f4ecd6; /* travertine */
--bg-2: #ebe0c4; /* lifted */
--bg-deep: #ddd0b2;
--surface: #faf2dc; /* lit travertine */
--surface-2: #f6ecd0;
--surface-3: #ebe0c4;
--paper: #ffffff; /* print-fidelity white */
/* Ink stays charcoal — distinct text from the warm cream is what
gives Aperitivo readability. */
--ink: #1c1814;
--ink-bright: #0e0a06;
--ink-dim: #5a4e3e;
--ink-faint: #6e5e48;
--rule: rgba(28, 24, 20, 0.14);
--rule-strong: rgba(28, 24, 20, 0.32);
--rule-faint: rgba(168, 56, 32, 0.24);
--rule-gold: rgba(168, 56, 32, 0.58);
/* Accents — TRUE CAMPARI RED. Pushed from the v239 #b8421e
(Negroni-orange leaning) to #a83820 (deeper, more wine-toned
red — the actual Campari bottle color, not the diluted spritz).
Still AA-compliant on travertine. */
--brass-light: #c84838;
--accent: #a83820; /* Campari red — the hero */
--accent-2: #c84838;
--accent-soft: #fadfd0;
--brass: #a83820;
--brass-deep: #6c1c0a;
--gold-foil: linear-gradient(135deg, #c84838 0%, #a83820 30%, #6c1c0a 60%, #d05a40 100%);
/* Mood — terrazzo plum + Italian olive (NEW). The olive is the
differentiator — it's what makes the palette feel specifically
Italian-aperitivo (olive-and-Campari-color combo) rather than
generic warm-light. */
--maraschino: #5a2845; /* terrazzo plum */
--maraschino-2: #7a3a5c;
--burgundy: #401a30;
--bottle: #7a8a3a; /* olive leaf — NEW HERO support */
--bottle-2: #94a44e;
--absinthe: #5a2845;
--copper: #a83820;
--rose-gold: #de8a64;
--neon-amber: #d4a234;
--red: #a83820;
/* Spirit bands — Aperitivo palette, anchored on Campari red */
--spirit-whiskey: #a06038;
--spirit-gin: #4a6638; /* olive-leaning */
--spirit-rum: #a05a32;
--spirit-agave: #6a7a3a;
--spirit-brandy: #a05230;
--spirit-vodka: #6a7080;
--spirit-liqueur: #5a2845;
--spirit-aperitif: #a83820; /* Campari, palette match */
--spirit-vermouth: #983a48;
--spirit-wine: #6a1828;
--spirit-multi: #a83820; /* Campari, palette match */
/* Display — Cochin. Italian-Renaissance-feeling French serif,
iOS-bundled. Distinct from Amber's Bodoni and Walnut's Iowan. */
--serif-display: "Cochin", "Bodoni 72", "Didot", "Hoefler Text", Georgia, serif;
--radius: 4px;
/* Ornament — ✶ six-pointed star, terrazzo-chip motif */
--ornament-divider: "✶";
--ornament-section: "✶";
--dropcap-color: #a83820;
--dropcap-shadow: none;
/* Light-theme dropcap frame */
--dropcap-frame-bg: rgba(168, 56, 32, 0.10);
--dropcap-frame-border: 1px solid rgba(168, 56, 32, 0.50);
--dropcap-frame-radius: 3px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
--accent-rgb: 168, 56, 32; /* Campari red */
--maraschino-rgb: 90, 40, 69;
--brass-rgb: 168, 56, 32;
--bottle-rgb: 122, 138, 58; /* olive */
--on-accent: #f4ecd6; /* travertine on Campari */
/* v320 — Scrim override for Aperitivo (light theme). Same fix
as Pineapple: dark-theme default rgba(0,0,0,0.78) overpowers
travertine. Use a warm terracotta-tinted scrim instead. */
--scrim: rgba(58, 24, 20, 0.55);
--scrim-soft: rgba(58, 24, 20, 0.20);
/* Vignette — terracotta low-alpha tint. */
--vignette: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(90, 40, 32, 0.10) 100%);
--print-edition-name: "Aperitivo";
--section-plate-glyph: "✶";
--section-plate-bg: rgba(168, 56, 32, 0.12);
--section-plate-border: 1px solid rgba(168, 56, 32, 0.45);
--section-plate-radius: 50%;
--section-plate-color: #a83820;
--page-edge-color: rgba(168, 56, 32, 0.55);
/* Texture — laid paper grain. DARK particles on light bg (inverse
of the dark themes' light-on-dark particles) so the surface reads
as actual paper instead of plastic. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 180px 180px;
}
/* ============================================================
THEME — Velvet (v206, Wave 88)
Cabaret salon. Aubergine walls, magenta velvet curtains,
antique-gold sconces, plum banquettes. Theatrical counterpart
to Rosé — jewel tones, not Bordeaux warmth. Burlesque cocktail
lounge. Display: Didot. Ornament: ✥ (Maltese heraldry).
============================================================ */
[data-theme="velvet"] {
/* v232 — Velvet kept, palette rebuilt for burlesque-cabaret mood.
Magenta curtain + saturated theatre purple + true gold gilt.
v239 — bg shifted from v238's #261028 to #1c0830, fully into deep
aubergine/eggplant. Was bg-distance 11 from Rosé (#2a1620) — both
read as "dark with pink-wine accent" on a phone. Now bg-distance
~30+ from Rosé, clearly the purple-theater theme. */
/* v265 — PUSHED HARDER. Velvet had the right idea (burlesque
cabaret) but was half-committed. The hero was a muted gilt that
read as "Walnut's-cousin-with-purple-bg"; the magenta played
support. Pushed: magenta becomes the HERO accent, gilt the
secondary. Saturation +20% across the board. The whole binding
now reads as a theatre poster — saturated, theatrical, loud. */
--bg: #180428; /* deeper stage aubergine */
--bg-2: #260840;
--bg-deep: #0c0214;
--surface: #381038; /* magenta-tinged panel */
--surface-2: #481648;
--surface-3: #581c58;
--paper: #f6e8d4;
--ink: #f6e8d4;
--ink-bright: #fbf0e0;
--ink-dim: #c0a098;
--ink-faint: #a08488;
--rule: #381038;
--rule-strong: #581c58;
--rule-faint: rgba(232, 56, 94, 0.22);
--rule-gold: rgba(232, 56, 94, 0.60);
/* Accents — CABARET CRIMSON-PINK as the new hero. Pushed from a
muted #c4327a to a saturated #e8385e — the theatre-poster pink
that catches the spotlight. True gilt #f0c038 (also brighter)
plays accent-2 / secondary. */
--brass-light: #f44e74;
--accent: #e8385e; /* cabaret crimson — new hero */
--accent-2: #f0c038; /* true gilt — secondary */
--accent-soft: #3a0c1c;
--brass: #e8385e;
--brass-deep: #8a1c34;
/* Magenta-to-gilt gradient — true theatre-poster ink */
--gold-foil: linear-gradient(135deg, #f44e74 0%, #e8385e 30%, #8a1c34 55%, #f0c038 100%);
/* Mood — claret velvet, gilt, magenta drape */
--maraschino: #a8284c; /* claret support */
--maraschino-2: #c83864;
--burgundy: #6a0e2c;
--bottle: #5a2440; /* plum drape */
--bottle-2: #7a3856;
--absinthe: #f0c038; /* gilt */
--copper: #c84878; /* warm magenta */
--rose-gold: #f088a8;
--neon-amber: #f0c038; /* gilt */
--red: #e8385e; /* cabaret pink */
/* Spirit bands — pushed saturation, jewel-tone variation */
--spirit-whiskey: #f0c038; /* gilt */
--spirit-gin: #b8b0a4; /* warm silver */
--spirit-rum: #d49058;
--spirit-agave: #a8a878;
--spirit-brandy: #d47058;
--spirit-vodka: #d8c4d0;
--spirit-liqueur: #c068d4; /* saturated purple */
--spirit-aperitif: #e8385e; /* cabaret pink, palette match */
--spirit-vermouth: #c84878;
--spirit-wine: #a8284c; /* claret, palette match */
--spirit-multi: #f0c038; /* gilt, palette match */
/* Display + geometry — Didot theatrical, 6px curtain corners */
--serif-display: "Didot", "Bodoni 72", "Hoefler Text", Georgia, serif;
--radius: 6px;
/* Ornament — ✥ Maltese cross, heraldic theatre-poster mark.
Kept from prior Velvet — it works. Just brighter color now. */
--ornament-divider: "✥";
--ornament-section: "✥";
--dropcap-color: #e8385e; /* cabaret pink */
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.65);
--dropcap-frame-bg: rgba(232, 56, 94, 0.14);
--dropcap-frame-border: 1px solid rgba(232, 56, 94, 0.65);
--dropcap-frame-radius: 4px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
--accent-rgb: 232, 56, 94; /* cabaret pink */
--maraschino-rgb: 168, 40, 76; /* claret */
--brass-rgb: 232, 56, 94;
--bottle-rgb: 90, 36, 64;
--on-accent: #180428; /* aubergine on cabaret pink */
--print-edition-name: "Velvet";
--section-plate-glyph: "✥";
--section-plate-bg: rgba(232, 56, 94, 0.14);
--section-plate-border: 1px solid rgba(232, 56, 94, 0.55);
--section-plate-radius: 4px;
--section-plate-color: #f0c038; /* gilt secondary on section plates */
--page-edge-color: rgba(240, 192, 56, 0.55); /* gilt edge gilding */
/* Texture — velvet nap with both magenta + gilt flecks. The dual-
ink texture is what tells you this binding is theatrical, not
monochromatic — every flicker is a different stage light. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 180px 180px;
}
/* ============================================================
THEME — Copper (v206, Wave 88)
Apothecary cabinet. Smoked-oak shelves, hammered-copper measure
tins, sealing-wax red labels, parchment ink. Old-pharmacy
cocktail mood — the bartender as compounding chemist. Display:
Big Caslon. Ornament: ⚜ (fleur-de-lis, apothecary mark).
============================================================ */
[data-theme="copper"] {
/* v232 — ID "copper" repurposed as "Habana". Tropical poster-bar mood:
red leather banquette, brass-bell yellow, palm-tile teal wall.
v238 — bg shifted from cigar-tobacco brown #251812 (which was
bg-distance 2 from Chesterfield and 6 from Walnut — three warm-
brown themes when there should be one) to a deep palm-green wall.
Now Habana reads as the TROPICAL bar it's named for, not a fourth
wood-paneled study. Red leather + brass + tile teal stay; the WALL
just got greener. */
--bg: #0e2820;
--bg-2: #163328;
--bg-deep: #061812;
--surface: #1f3e30;
--surface-2: #28493a;
--surface-3: #345644;
--paper: #ece2c0;
--ink: #ece2c0;
--ink-bright: #fbf0c8;
--ink-dim: #b8a684;
--ink-faint: #8a7858;
--rule: #1c3328;
--rule-strong: #2c4438;
--rule-faint: rgba(204, 58, 48, 0.22);
--rule-gold: rgba(204, 58, 48, 0.55);
/* Accents — v238: red leather as primary (was gold-yellow, which
overlapped with Velvet's true gilt). 1950s-tropical-poster red is
the iconic Habana signature. Brass-bell yellow demoted to accent-2
(still present, no longer the hero color). */
--brass-light: #e85148;
--accent: #cc3a30;
--accent-2: #e85148;
--accent-soft: #3a1410;
--brass: #cc3a30;
--brass-deep: #8a2218;
--gold-foil: linear-gradient(135deg, #e85148 0%, #cc3a30 30%, #8a2218 60%, #f06860 100%);
/* Mood — red leather banquette + palm-tile teal trim + brass-bell yellow.
v238: maraschino is now the SAME as accent (red is the hero color). */
--maraschino: #cc3a30;
--maraschino-2: #e85148;
--burgundy: #6a1610;
--bottle: #3a7060;
--bottle-2: #4a8a78;
--absinthe: #3a7060;
--copper: #d8a234;
--rose-gold: #e88660;
--neon-amber: #d8a234;
--red: #cc3a30;
/* Spirit bands — Havana saturation */
--spirit-whiskey: #d4a058;
--spirit-gin: #4a8878;
--spirit-rum: #d4905a;
--spirit-agave: #6a9678;
--spirit-brandy: #d48058;
--spirit-vodka: #a8a89c;
--spirit-liqueur: #b078a8;
--spirit-aperitif: #d44a40;
--spirit-vermouth: #c46070;
--spirit-wine: #6a1610;
--spirit-multi: #ecbe5e;
/* Display — Caslon italic, Cuban poster feel */
--serif-display: "Caslon", "Big Caslon", "Hoefler Text", Georgia, serif;
--radius: 2px;
/* Ornament — rosette, tropical bloom */
--ornament-divider: "❋";
--ornament-section: "❋";
--dropcap-color: #cc3a30;
--dropcap-shadow: 0 1px 0 rgba(0,0,0,0.55);
--dropcap-frame-bg: rgba(204, 58, 48, 0.12);
--dropcap-frame-border: 1px solid rgba(204, 58, 48, 0.55);
--dropcap-frame-radius: 2px;
--dropcap-ornament-pre: "";
--dropcap-ornament-post: "";
--accent-rgb: 204, 58, 48;
--maraschino-rgb: 204, 58, 48;
--brass-rgb: 216, 162, 52;
--bottle-rgb: 58, 112, 96;
--on-accent: #f6e8d4;
--print-edition-name: "Habana";
--section-plate-glyph: "❋";
--section-plate-bg: rgba(204, 58, 48, 0.12);
--section-plate-border: 1px solid rgba(204, 58, 48, 0.45);
--section-plate-radius: 2px;
--section-plate-color: #cc3a30;
--page-edge-color: rgba(204, 58, 48, 0.55);
/* Texture — tropical tile pattern. v238 — re-tinted to brass-bell
yellow (secondary accent) so the wall still has gold sparkle even
though the primary accent is now red leather. The dimpled ellipses
read as gold-bell glints on the palm-green wall. */
--texture-image: url("data:image/svg+xml;utf8,");
--texture-size: 200px 200px;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overscroll-behavior-y: none;
}
/* Atmosphere — theme-driven gradient glow. Each theme contributes its own
accent tint at the top and mood tints at the bottom; the bg fills the
field. v54 baked Tiki Sunset coral/amber/pink into hardcoded literals
here, which painted every theme orange even after switching. v55 routes
the glow through theme tokens so Bemelmans gets gold-leaf ceiling glow,
Connaught gets silver mirror, Maison Premiere gets brass + herb,
Smuggler's Cove gets rum-amber + palm. The accent-rgb / maraschino-rgb /
bottle-rgb tokens are defined per theme below. */
body {
position: relative;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--maraschino-rgb), 0.07) 40%, transparent 70%),
radial-gradient(ellipse 70% 50% at 30% 100%, rgba(var(--brass-rgb), 0.10) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 70% 100%, rgba(var(--bottle-rgb), 0.10) 0%, transparent 60%),
var(--bg);
}
body::before {
/* Subtle paper grain — neutral white tint at very low alpha, so the
texture reads on every theme without imposing a warm-cream cast.
v74: stacks a per-binding texture beneath the paper grain.
The texture is themed (leather / pinstripe / botanical / wood),
declared via --texture-image + --texture-size per theme block.
Each binding now feels like a different surface, not just a
different palette over the same canvas. */
content: "";
position: fixed; inset: 0;
background-image:
url("data:image/svg+xml;utf8,"),
var(--texture-image, none);
background-size:
240px 240px,
var(--texture-size, 200px 200px);
background-repeat: repeat, repeat;
pointer-events: none;
z-index: 0;
}
body::after {
/* Vignette — neutral darken at the edges, spotlight at center.
v320 — Uses --vignette token so light themes can opt out
(a 55% black radial wash on a sand-cream UI reads as moldy
paper, not editorial). Default = the original dark wash;
Pineapple + Aperitivo override to a much lighter warm tint. */
content: "";
position: fixed; inset: 0;
background: var(--vignette);
pointer-events: none;
z-index: 0;
}
#app { position: relative; z-index: 1; }
body { min-height: 100vh; min-height: 100dvh; }
input, textarea, select, button { font-family: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* ============================================================================
v54 — Canonical .input style. Every ,