/* =====================================================================
Viva Voce design tokens: "House lights down"
---------------------------------------------------------------------
Source of truth: the Signature Screens canvas (27 September 2026,
https://claude.ai/artifact/XtTzMmYwEuWEWX2Rd987Jw). Every value here
was taken from those artboards; change the canvas and this file
together, never one alone.
The idea in one line: the app is a dark stage. One amber spotlight is
the only accent. Each character is a coloured light. Ivory paper is
the page, wherever the writer's own words sit on it.
This file holds VALUES ONLY: custom properties on :root plus two
scopes: .vv-on-paper (a section on ivory) and the light theme, "house
lights up" (:root[data-theme="light"], at the end). Components live in
patterns.css. Every page imports this file first:
Fonts (Google Fonts, one request, in before the stylesheets):
League Gothic; Instrument Sans 400/500/600/700;
Newsreader 400/500 + italic 400; Courier Prime 400/700 + italic 400.
===================================================================== */
:root {
/* ---------------------------------------------------------------
Stage: the dark surfaces, from the floor up
--------------------------------------------------------------- */
--vv-stage: #1A1410; /* page ground, the dark house */
--vv-stage-sunk: #1F1813; /* the player dock, a step below */
--vv-panel: #221A15; /* cards, panels, rails' boxes */
--vv-panel-raised: #2C231C; /* selected rail row, selected roster card */
--vv-panel-hi: #30261E; /* icon buttons sitting on a panel */
--vv-lane: #2A211A; /* an empty timeline lane */
--vv-line: #3A2F26; /* hairlines and card borders */
--vv-line-strong: #4A3D31; /* outline buttons, stronger dividers */
/* Text on stage. Contrast measured on --vv-stage. */
--vv-text: #F4ECE0; /* primary, 15.6:1 */
--vv-text-2: #BFB1A0; /* secondary, 8.7:1 */
--vv-text-3: #948673; /* dimmed past lines only, 5.1:1; never for
essential small text */
/* ---------------------------------------------------------------
The spotlight: the only accent
--------------------------------------------------------------- */
--vv-amber: #F4B740;
--vv-amber-hover: #FFD27A; /* links on hover */
--vv-amber-ink: #1A1410; /* text and icons ON amber */
--vv-amber-soft: rgba(244, 183, 64, 0.12); /* callouts, warm fills */
--vv-amber-ring: rgba(244, 183, 64, 0.10); /* halo around selections */
--vv-amber-glow: rgba(244, 183, 64, 0.22); /* the stage-light gradient */
--vv-amber-fill-hover: #F6C15B; /* an amber button under the pointer:
amber 86% + white, held as a value
so the light theme can darken it */
--vv-tile-glow: rgba(244, 183, 64, 0.30); /* the chapter tile's light (phone) */
/* ---------------------------------------------------------------
Paper: where the writer's page is
--------------------------------------------------------------- */
--vv-paper: #F3ECE1; /* ivory section ground */
--vv-page: #F6F0E6; /* the screenplay page itself */
--vv-paper-card: #FBF7F0; /* cards sitting on paper */
--vv-paper-line: #E0D3C0;
--vv-paper-line-strong: #CDBEA9;
--vv-ink: #1A1410; /* text on paper */
--vv-ink-2: #5C4F42; /* secondary on paper, 6.7:1 */
--vv-mark-on-paper: #A86A00; /* note underline on paper: a mark, 3.9:1,
never used for text */
/* ---------------------------------------------------------------
Voices: one colour per character
Assignment rule (patterns.css, "Character colour"): the narrator is
always house light; named characters take 1-7 in order of line
count; everyone past seven shares the ensemble colour.
Colour is NEVER the only signal. Coral, lavender, blue and pink sit
at nearly the same lightness (0.38-0.42), so a colour-blind listener
cannot tell them apart by colour: every coloured element also
carries the character's name (script label, lane label, roster
card). All voices are 7.5:1 or better on --vv-stage.
Each voice has an -ink partner for text on paper (screenplay cues),
every one at 5:1 or better on --vv-page (measured 27 Sep 2026).
--------------------------------------------------------------- */
--vv-voice-narrator: #EDE3D3; /* house light */
--vv-voice-1: #6FD0C4; --vv-voice-1-ink: #1C6B63; /* teal */
--vv-voice-2: #F08E6B; --vv-voice-2-ink: #A8441F; /* coral */
--vv-voice-3: #A9A3F5; --vv-voice-3-ink: #5B53B8; /* lavender */
--vv-voice-4: #7FA8E6; --vv-voice-4-ink: #2F5C9E; /* blue */
--vv-voice-5: #EE8FC0; --vv-voice-5-ink: #A8397A; /* pink */
--vv-voice-6: #A8D08D; --vv-voice-6-ink: #3F6B26; /* sage */
--vv-voice-7: #8FD6F2; --vv-voice-7-ink: #1F6F8F; /* sky */
--vv-voice-ensemble: #BFB1A0; --vv-voice-ensemble-ink: #5C4F42;
--vv-voice-reader: #EDE3D3; /* screenplay action lines: the table-read reader */
--vv-now-mix: 11%; /* how strongly the line being spoken is tinted
in its speaker's colour */
/* ---------------------------------------------------------------
Type
--------------------------------------------------------------- */
--vv-font-display: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif;
--vv-font-ui: 'Instrument Sans', system-ui, sans-serif;
--vv-font-script: 'Newsreader', Georgia, serif;
--vv-font-screenplay: 'Courier Prime', 'Courier New', monospace;
/* Display sizes. League Gothic, uppercase, titles only (see guide). */
--vv-size-marquee: 11rem; /* 176px landing hero */
--vv-size-title-xl: 9.75rem; /* 156px a screen's own title: THE CAST */
--vv-size-title-l: 8rem; /* 128px spotlight character name */
--vv-size-section: 6.5rem; /* 104px landing section headline */
--vv-size-price: 5.5rem; /* 88px prices, the closing CTA */
--vv-size-title-m: 2.75rem; /* 44px card titles */
--vv-size-title-s: 2.125rem; /* 34px panel titles, CHAPTER IX */
--vv-size-wordmark: 1.75rem; /* 28px app bar wordmark (36px on landing) */
/* UI sizes. Instrument Sans, sentence case. */
--vv-size-xs: 0.8125rem; /* 13 meta, lane labels, timestamps */
--vv-size-s: 0.875rem; /* 14 labels, tabs, small buttons */
--vv-size-m: 0.9375rem; /* 15 body in panels, note text */
--vv-size-base: 1rem; /* 16 default UI text */
--vv-size-l: 1.0625rem; /* 17 list items, lead text in cards */
--vv-size-xl: 1.3125rem; /* 21 landing body */
--vv-size-2xl: 1.375rem; /* 22 hero sub-copy */
/* Script sizes. Newsreader for prose, Courier Prime for screenplays. */
--vv-size-script: 1.1875rem; /* 19 a line in the studio */
--vv-size-script-now: 1.4375rem; /* 23 the line being spoken */
--vv-size-script-quote: 1.875rem; /* 30 the spotlight quote */
--vv-size-screenplay: 0.9375rem; /* 15 on a 21px line, like 12pt Courier */
--vv-leading-display: 0.86;
--vv-leading-tight: 1.3;
--vv-leading-ui: 1.5;
--vv-leading-script: 1.6;
--vv-leading-screenplay: 1.3125rem; /* 21px: one screenplay line */
--vv-track-wordmark: 0.06em;
--vv-track-display: 0.005em;
--vv-weight-regular: 400;
--vv-weight-medium: 500;
--vv-weight-semibold: 600;
--vv-weight-bold: 700;
/* ---------------------------------------------------------------
Space: a 4px grid
--------------------------------------------------------------- */
--vv-space-1: 4px;
--vv-space-2: 8px;
--vv-space-3: 12px;
--vv-space-4: 16px;
--vv-space-5: 20px;
--vv-space-6: 24px;
--vv-space-7: 28px;
--vv-space-8: 32px;
--vv-space-10: 40px;
--vv-space-12: 48px;
--vv-space-14: 56px;
--vv-space-16: 64px;
--vv-space-18: 72px;
--vv-space-section: 140px; /* between landing sections */
/* ---------------------------------------------------------------
Shape: radius follows hierarchy, never one radius for everything
--------------------------------------------------------------- */
--vv-radius-xs: 4px; /* lane blocks, inline marks, the page's top */
--vv-radius-sm: 12px; /* rail rows, callouts, meters */
--vv-radius-md: 16px; /* note cards, the now-speaking block */
--vv-radius-lg: 20px; /* cards */
--vv-radius-xl: 24px; /* panels, pricing plans */
--vv-radius-2xl: 28px; /* the casting spotlight */
--vv-radius-pill: 999px; /* buttons, chips, segmented controls */
/* ---------------------------------------------------------------
Depth
--------------------------------------------------------------- */
--vv-shadow-panel: 0 40px 80px rgba(0, 0, 0, 0.45);
--vv-shadow-card: 0 30px 60px rgba(0, 0, 0, 0.40);
--vv-shadow-page: 0 30px 70px rgba(0, 0, 0, 0.50);
--vv-shadow-paper: 0 20px 40px rgba(90, 70, 40, 0.10);
/* ---------------------------------------------------------------
Motion: answers a person's action; nothing moves on its own
except audio-driven visuals while something is playing
--------------------------------------------------------------- */
--vv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--vv-dur-fast: 120ms;
--vv-dur: 200ms;
--vv-dur-slow: 360ms;
/* ---------------------------------------------------------------
Interaction
--------------------------------------------------------------- */
--vv-focus-ring: 2px solid var(--vv-amber);
--vv-focus-offset: 3px;
--vv-hit: 44px; /* minimum target, desktop and phone */
/* ---------------------------------------------------------------
Layout: the desktop studio's frame
--------------------------------------------------------------- */
--vv-appbar: 64px;
--vv-rail: 232px; /* chapters */
--vv-rail-screenplay: 264px; /* scenes: sluglines need the room */
--vv-aside: 372px; /* notes, pronunciation, cast */
--vv-dock: 252px; /* transport plus timeline; 200px for 3 lanes */
--vv-measure: 680px; /* longest script line, about 80 characters */
/* The screenplay page is measured in ch, not px, so it lives in
patterns.css (.vv-page: 74ch wide, 60-character action lines). */
--vv-content: 1296px; /* landing content width at 1440 */
}
/* ---------------------------------------------------------------------
Theme scope: paper. Put .vv-on-paper on any section or panel that
sits on ivory; components built on the stage variables then render
correctly on paper with no second set of classes.
--------------------------------------------------------------------- */
.vv-on-paper {
--vv-text: var(--vv-ink);
--vv-text-2: var(--vv-ink-2);
--vv-text-3: var(--vv-ink-2);
--vv-panel: var(--vv-paper-card);
--vv-panel-raised: var(--vv-paper-card);
--vv-line: var(--vv-paper-line);
--vv-line-strong: var(--vv-paper-line-strong);
--vv-shadow-card: var(--vv-shadow-paper);
background: var(--vv-paper);
color: var(--vv-ink);
}
/* ---------------------------------------------------------------------
Theme: house lights up (29 September 2026)
---------------------------------------------------------------------
The same stage with the house lights up: ivory where the dark was,
umber ink where the light was, antique gold where the amber spotlight
was. The app sets it on the root element, remembered per device:
.vv-theme-light applies the same values to one section of a page
(the pattern guide uses it to show both themes side by side); give
that section its own background, as .vv-on-paper does.
Dark ("house lights down") stays the default and the brand. The
landing page stays dark whatever the viewer picks. The canvas
artboards "Studio, house lights up" and "Mobile companion, house
lights up" are this block's source of truth: change them together.
Measured on the ivory ground (#F4EDE2), 29 September 2026, the same
way as the dark figures above:
ink 15.7:1, ink-2 6.8:1, text-3 4.9:1;
gold as text 5.2:1 (4.8:1 on the dock); ivory on a gold button 5.7:1;
every character colour 5.3:1 or better on the ground, and 4.7:1 or
better as a label on its own now-speaking tint (10%).
Coral, pink and sky are one step deeper here than their -ink partners
(#A3421E, #A33776, #1D6886): as labels on the 10% tint the partners
measured 4.47, 4.44 and 4.24, under the 4.5 floor. The screenplay page
keeps using the -ink partners, which were measured on the page itself.
--------------------------------------------------------------------- */
:root[data-theme="light"],
.vv-theme-light {
color-scheme: light;
--vv-stage: #F4EDE2; /* ivory ground */
--vv-stage-sunk: #ECE3D5; /* the player dock, a step below */
--vv-panel: #FBF7F0; /* cards: laid paper, lighter than the ground */
--vv-panel-raised: #E9DFCF; /* a selected row: pressed parchment */
--vv-panel-hi: #F1E9DD;
--vv-lane: #E6DCCD;
--vv-line: #E0D3C0;
--vv-line-strong: #CDBEA9;
--vv-text: #1A1410; /* 15.7:1 */
--vv-text-2: #5C4F42; /* 6.8:1 */
--vv-text-3: #736455; /* 4.9:1, dimmed past lines */
--vv-amber: #805C0A; /* antique gold: 5.2:1 as text */
--vv-amber-hover: #654808; /* links on hover */
--vv-amber-ink: #F4EDE2; /* ivory ON gold, 5.7:1 */
--vv-amber-fill-hover: #6A4C08; /* a gold button deepens under the pointer */
--vv-amber-soft: rgba(128, 92, 10, 0.10);
--vv-amber-ring: rgba(128, 92, 10, 0.12);
--vv-amber-glow: rgba(214, 160, 58, 0.30); /* warm gold light on ivory */
--vv-tile-glow: rgba(214, 160, 58, 0.30);
--vv-voice-narrator: #3A2F26; /* the house light becomes umber ink, 11.2:1 */
--vv-voice-reader: #3A2F26;
--vv-voice-1: #1C6B63; /* teal 5.4:1 */
--vv-voice-2: #A3421E; /* coral 5.4:1 */
--vv-voice-3: #5B53B8; /* lavender 5.4:1 */
--vv-voice-4: #2F5C9E; /* blue 5.7:1 */
--vv-voice-5: #A33776; /* pink 5.4:1 */
--vv-voice-6: #3F6B26; /* sage 5.4:1 */
--vv-voice-7: #1D6886; /* sky 5.3:1 */
--vv-voice-ensemble: #6B5D4F; /* 5.5:1 */
--vv-now-mix: 10%;
--vv-shadow-panel: 0 30px 60px rgba(90, 70, 40, 0.14);
--vv-shadow-card: 0 20px 44px rgba(90, 70, 40, 0.12);
--vv-shadow-page: 0 24px 56px rgba(90, 70, 40, 0.16);
}
.vv-theme-light { background: var(--vv-stage); color: var(--vv-text); }