/* ============================================================
LORVARA BRAND TOKENS — single source of truth
============================================================
Colours, type and radii, copied verbatim from LORVARA_BRAND.md
§2 "Design Tokens" and §3 "Typography". That document remains
canonical: if a value changes there, change it here in the same
commit.
THIS FILE IS SHARED. Two projects consume it:
- the app, through `src/styles/brand-tokens.css`, which imports
this file and adds the editor-shell layout tokens and the
reduced-motion rule on top;
- the documentation site, through
`docs-site/src/styles/brand.css`, which imports this file and
maps these tokens onto Starlight's own `--sl-*` properties.
The docs site maps rather than transcribes on purpose. A theme
that copies "#0064ab" into itself drifts the day the brand moves,
and the drift is invisible until somebody notices the docs look
wrong. Every value the docs render resolves back to a line in this
file.
These are custom-property declarations only. Nothing here applies a
style on its own, so loading it globally cannot change the
appearance of a page that doesn't reference the tokens.
============================================================ */
:root {
/* Surfaces */
--bg: #070e1c; /* ink-black-950 — page background */
--bg-raised: rgba(255, 255, 255, 0.03); /* card / input surface */
--bg-raised-2: rgba(255, 255, 255, 0.06); /* hover surface, nested surface */
--stroke: rgba(255, 255, 255, 0.08); /* default hairline border */
--stroke-strong: rgba(255, 255, 255, 0.15); /* hover border, menu border */
/* PHASE 5 (2026-09-01): the level-3 SOLIDS, named. LORVARA_BRAND.md §4 has always listed
these four by role — menus #0d1626, dialogs #0b1322, drawers #060c18, toast #111c30 — but
every call site carried the hex, and the page ground grew ten near-miss neighbours. These
are solids, not overlays, on purpose: a popover, an , a dialog or a drawer floats
over arbitrary content and must be opaque; --bg-raised over --bg composites to ~#0f1620,
which is neither of them. The values are EXACTLY what the sites already rendered — this
pass moved no pixel. (--bg-chrome #070d1a, the rails' and panels' fill, sat one unit off --bg
and was retired onto --bg in the closure pass, ruled 1 Sep — a 1-unit correction made knowingly.) */
--bg-menu: #0d1626; /* popover / menu / tooltip / — opaque, --stroke-strong border */
--bg-dialog: #0b1322; /* dialog chassis; the Workspace node card reuses it */
--bg-drawer: #060c18; /* slide-out drawers (Studio projects / library) */
--bg-toast: #111c30; /* the toast (§5) */
/* Text */
--text: #ebf0fa; /* ink-black-50 — cool white, primary */
--text-2: #9d9da8; /* neutral grey — secondary (intentionally un-tinted) */
--text-3: #5d5d68; /* neutral grey — tertiary / placeholder / labels */
/* Accents — colour carries meaning, see LORVARA_BRAND.md §2 */
--coral: #ff7a66; /* vibrant-coral-300 — light coral (tints / text on dark).
Named amber until 2026-09-03: that name caused two
bugs (a gold reached for it; a shadow --coral was
invented beside it), so it now says what it is.
WORKSPACE'S BASE since 10 Sep (colour by role,
tasks/brief-colour-pass-by-role.md): its text is
--coral-light below. Δ178 from --orange. */
--coral-light: #ffa08a; /* the readable tint of --coral, as --blue-light is to --cyan —
Workspace's TEXT in nav chrome. Measured before minting
(redmean, §4): Δ270 from Skills' #ff3516, Δ88 from
--models-light #e79ec0 (the other pink-red tint), Δ92 from
its own base, Δ102 from --gold-light. 9.78:1 on --bg. */
--coral-deep: #ff3516; /* coral, deep (kept in sync with --orange) */
--orange: #ff3516; /* hot coral — the brand mark ▲, the Prompt Agent's triangle,
and since 10 Sep SKILLS: Skills and the Prompt Agent are
one idea, so they share the mark's colour by role. Also
Dashboard, app avatar, Video highlights. */
--cyan: #0064ab; /* blue — Image / primary accent / selection */
--emerald: #2ed195; /* emerald-500 — Generate, sidebar active, Key Prompt */
--blue-light: #66bfff; /* deep-space-blue-300 — blue-accent text/icons on dark */
--blue: #0095ff; /* deep-space-blue-500 — secondary action */
--green-deep: #1c7d5a; /* emerald-700 (unused) */
--save-green: #13573e; /* Save button border */
--amethyst: #684278; /* Amethyst Smoke — the PROMPT level: New Prompt, Studio and Library
nav chrome (colour carries level, nav-contract §4, 10 Sep) */
--amethyst-light: #c4a3d6; /* the readable tint, as --blue-light is to --cyan. Named 10 Sep
so the Library page's "Library:" kicker could consume a token; the
52 sites that carry the hex are unchanged. */
--yellow: #eab308; /* yellow-500 — use sparingly; On Hold status badges */
--red: #ff3b30; /* Fire-engine red — destructive/danger ONLY, use sparingly */
--red-deep: #d70015; /* Deep fire-engine red — border/background base for --red */
/* NAV V3 entity colours, promoted 1 Sep 2026 once Ninja accepted both. They
were held in src/styles/nav-v3.css while unruled, because this file is the
ONE thing the app and docs-site share (docs-site/astro.config.mjs:10) and an
unapproved value has no business crossing that line. */
--gold: #b8801f; /* deep gold (amber) — SCENES & SHOTS, since 10 Sep (colour by
role, tasks/brief-colour-pass-by-role.md; the homepage wheel
wore it first). Minted 1 Sep for Skills, precisely to keep
Skills off coral — that caution is GONE with a reason: Skills
moved to hot coral #ff3516 because Skills and the Prompt
Agent are one idea, and the mark ▲ is that colour. Still
chosen against --yellow #eab308 (draft / On Hold): bronze
hue, not a dimmed yellow. Measured 10 Sep against every
other entity value — the closest is --gold-light vs --coral
at Δ115. */
--gold-light: #e3ab4d; /* the readable tint, as --blue-light is to --cyan */
/* --shot #5a3f9e / --shot-light #b3a2f0 (Shot List violet, 1 Sep) RETIRED 10 Sep:
Scenes & Shots moved to the gold family and nothing consumed them. Not
repurposed. The tint-collision lesson they taught stays in nav-contract §4. */
--models: #a63b6e; /* deep rose — MODELS: the model a prompt is written for; ready for
model-specific pages and the docs site's models section (ruled
10 Sep, tasks/brief-models-token-and-wheel.md). A NEW colour, not
an extraction — the hero was measured and holds no rose. NOT
--orange #ff3516 (the brand mark, Workspace's base): Δ198 by the
redmean distance §4 uses. */
--models-light: #e79ec0; /* the readable tint, as --blue-light is to --cyan. Measured before
minting: Δ153 from --coral #ff7a66 (the one hue it could be taken
for, and coral is Workspace), Δ68 from the amethyst tint #c4a3d6 it
shares the wheel and the map with — wider than the Δ48 --shot-light
was retuned to hold. 9.23:1 on --bg. */
/* Type — the four faces. LORVARA_BRAND.md §3.
Instrument Serif is a DISPLAY face: 20px and up, never below. */
--font-ui: 'Inter', system-ui, sans-serif;
--font-display: 'Space Grotesk', var(--font-ui);
--font-serif: 'Instrument Serif', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Type scale — LORVARA_BRAND.md §3 "Recurring type patterns".
Added here so the docs site reads the scale from the same place it
reads the colours; the app states these inline today and is not
changed by their presence. */
--fs-body: 13.5px; /* base body, line-height 1.5, antialiased */
--fs-card-title: 12px; /* display face, 600, uppercase, .12em */
--fs-label: 11px; /* 600, uppercase, .09–.1em */
--fs-micro-label: 8.5px; /* micro-label above an input */
--fs-nav: 12px; /* 600, uppercase, .07em */
--fs-serif-min: 20px; /* the floor for --font-serif. Never below. */
--lh-body: 1.5;
--ls-card-title: .12em;
--ls-label: .1em;
--ls-nav: .07em;
/* Radii */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
/* Motion */
--ease: cubic-bezier(.22, 1, .36, 1);
}