/* Generated by scripts/tokens.py from
   /Users/Shared/Reverie/design-system/tokens.json (version 2)
   Do not edit. Site-only sizes are in src/css/site.css. */
:root {
  /* Colour */
  --bg: #121214;
  /* Page ground behind every surface */
  --sidebar: #161618;
  /* The primary navigation column and the phone drawer */
  --sidebar-text: #f0f0f2;
  /* Labels and icons on sidebar */
  --tab-pill: #000000;
  /* The current tab's capsule: white in light, black in dark (UI-039, D043) */
  --tab-rim: #000000;
  /* The capsule's control-stroke rim, the same as the capsule so the shadow outlines it (UI-03 */
  --tab-faint: #6c6c74;
  /* Icon and label of the tabs that are not current (UI-039, D043) */
  --surface: #1c1c1f;
  /* Cards, composers, rails, inputs */
  --surface-muted: #26262a;
  /* Chips at rest, status badge grounds, progress tracks, composer toolbars inside a surface,  */
  --selected: #2c2c31;
  /* The active navigation item, avatar discs and hover grounds */
  --line: #343438;
  /* Every 1px border: cards, inputs, dividers, chip outlines */
  --text: #f0f0f2;
  /* Body, titles, control labels on bg, surface, surface-muted and selected */
  --text-muted: #a0a0a8;
  /* Meta lines, eyebrows, placeholder text, secondary values on surface and bg */
  --brand: #e8955a;
  /* Ember, the one interactive colour: primary buttons, the selected row or option border, pre */
  --brand-strong: #f0b084;
  /* Links, inline tag text, codename-coloured badge text on surface and brand-soft */
  --brand-soft: #3a2a1e;
  /* Ground of inline tags, pressed filter chips, the selected segmented option and tier badges */
  --on-brand: #121214;
  /* Text and icons on a brand fill */
  --mark-echo: #5cc4b1;
  /* Echo's service marker only: the status dot and the memory bar segment */
  --mark-vibe: #b0a4e6;
  /* Vibe's service marker only: the status dot and the memory bar segment */
  --mark-mirage: #86a4e0;
  /* Mirage's service marker only: the status dot and the memory bar segment */
  --accent: var(--mark-vibe);
  /* Kept for compatibility with code written against version 1; it is Vibe's marker */
  --ok: #5fbf8a;
  /* Complete and resident states and the in-range lyric count */
  --warn: #d9a441;
  /* Running, training and queued-with-attention states, the active-job dot in the sidebar */
  --danger: #f2675c;
  /* Failed badges, error text, destructive buttons and menu items, failed-card dashed border */
  --danger-soft: #3a2422;
  /* Ground of a Failed badge; danger text on it */
  --on-danger: #121214;
  /* Text on a filled danger button (destructive-confirm) */
  --scrim: rgba(0, 0, 0, 0.55);
  /* The ground behind the phone drawer and the Dialog (D008, D055) */
  --media-disc: rgba(0, 0, 0, 0.5);
  /* The disc behind a control drawn on an image or video: the favourite star on Image & Video  */
  --on-media: #f0f0f2;
  /* An off icon on media-disc: the outline star (D054) */
  --on-media-brand: #f0b084;
  /* An on icon on media-disc: the filled star (D054) */
  /* Spacing */
  --space-1: 4px;
  /* Gap between a nav item's rows; badge vertical padding */
  --space-2: 8px;
  /* Gap between chips, between a label and its field, icon-to-label gap */
  --space-3: 12px;
  /* Input and chip horizontal padding, card grid gap, sidebar inner padding */
  --space-4: 16px;
  /* Card padding on row cards, composer toolbar padding, gap between cards in a tier row */
  --space-5: 24px;
  /* Composer canvas padding, gap between page sections, top bar horizontal padding */
  --space-6: 32px;
  /* Page gutter on desktop, padding around the main column */
  /* Radius */
  --radius-sm: 6px;
  /* Inline tags, small overlay labels on thumbnails, keyboard hints */
  --radius-md: 10px;
  /* Buttons, inputs, nav items, icon buttons, tab groups */
  --radius-lg: 16px;
  /* Cards, tier cards, composers, rails' inner panels */
  --radius-pill: 999px;
  /* Chips, filter pills, segmented controls, status badges, avatars */
  /* Layout */
  --sidebar-expanded: 232px;
  /* Width of the expanded sidebar (D007) */
  --sidebar-rail: 64px;
  /* Width of the collapsed icon rail (D007) */
  --nav-target: 44px;
  /* Square rail targets, drawer rows and phone tab hit areas */
  --drawer-width: 300px;
  /* Phone drawer width (D008) */
  --topbar-height: 56px;
  /* Height of the one-line top bar */
  --tabbar-height: 62px;
  /* Phone tab bar height above the safe-area inset: the 50px capsule plus 6px above and below  */
  --tab-capsule: 76px;
  /* Width of the current tab's capsule in the phone tab bar (UI-036, UI-039, D043) */
  --tab-capsule-height: 50px;
  /* Height of the tab capsule (UI-039, D043) */
  --settings-tree: 200px;
  /* Width of the Settings left tree */
  --tile: 216px;
  /* Output tile side on Image & Video and Library */
  --card-min: 240px;
  /* Least width of an output card in the Image & Video History grid and of a project card on t */
  --card-max-phone: 560px;
  /* Most width of the one-column card list on phones (UI-045, D046) */
  --cover-phone: 72px;
  /* The project header's cover beside the name on phones (UI-062, D062) */
  --showcase-band: 300px;
  /* Height of Home's showcase band above the create box (D086) */
  --showcase-band-phone: 200px;
  /* The showcase band's height on phones (D086; 170px until UI-076) */
  --showcase-prompt-max: 70%;
  /* Most width of the showcase's caption lines, so the prompt ends short of Use this prompt in */
  --showcase-prompt-max-phone: 60%;
  /* The showcase's caption lines' most width on phones (UI-076) */
  --detail-column: 440px;
  /* Width of the detail page's right column: header, text, settings and file panels (UI-046, D */
  --disc-header: 44px;
  /* The voice page's disc beside its name, coloured by tier (D050) */
  --meter-height: 8px;
  /* Track height of the dataset meter (D050) */
  --clip-number: 26px;
  /* Column width of a clip row's number in font-mono; 22px on phones (D050) */
  --clip-number-phone: 22px;
  /* Clip row's number column on phones, where the row is narrower (D050) */
  --review-dot: 7px;
  /* The brand dot before "To review" on a pending clip row (D050) */
  --composer-max: 880px;
  /* Maximum width of the floating composer on Image & Video */
  --waveform-height: 28px;
  /* Height of the waveform seek bar in audio rows (Waveform guideline) */
  --waveform-height-compact: 22px;
  /* Height of the waveform on a phone audio row's second line (RowCard guideline, D041) */
  --waveform-height-detail: 64px;
  /* Height of the waveform on an audio output's detail page (UI-046, D047) */
  --waveform-gap: 2px;
  /* Gap between waveform bars (Waveform guideline) */
  /* Control */
  --control-sm: 32px;
  /* Small square icon button: the sidebar's Keep open pin */
  --control-md: 36px;
  /* Icon-only buttons, the top bar search field height, and the standard button minimum height */
  --control-lg: 40px;
  /* Larger square control: the voice page's header ring, the clip ring and ✓/✕ toggles on phon */
  --control-pad: 10px 18px;
  /* Padding of a standard button at control size (Button guideline) */
  --row-pad: 9px 10px;
  /* Padding of an expanded-sidebar nav row (NavItem guideline) */
  --sidebar-inset: 10px;
  /* Horizontal inset of sidebar and drawer rows, group labels and headers inside the panel pad */
  --hair-gap: 2px;
  /* Micro gap inside a control: segmented group padding, phone tab icon-to-label */
  --badge-pad: 2px 9px;
  /* Padding of a status badge pill (StatusBadge guideline) */
  --search-max: 420px;
  /* Maximum width of the top bar search field */
  --search-menu: 560px;
  /* Width of the top bar's search results menu (D051) */
  --content-max: 640px;
  /* Maximum width of standalone page content */
  --settings-row-label: 90px;
  /* Minimum width of the label column in Settings rows */
  --chip-height: 28px;
  /* Chip height on desktop; touch layouts use control-md (Chip guideline) */
  --chip-pad: 0 12px;
  /* Chip padding, even on both sides (Chip guideline, UI-027) */
  --chip-icon: 20px;
  /* Square clear button inside a chip */
  --menu-disc: 28px;
  /* Initial disc of a voice in the Voice menu's project group (D067) */
  --player-title: 220px;
  /* Width of the player bar's title column on desktop (D068) */
  --player-clear: 88px;
  /* Extra bottom padding of the page while the player bar shows on desktop, so the last row is */
  --player-clear-phone: 64px;
  /* The same on phones, above the tab bar's clearance (D068) */
  --player-progress: 3px;
  /* Height of the phone player's progress line (D068) */
  --control-stroke: 2px;
  /* The one stroke of the copper control family: the PlayButton ring, filter chips, the ⋯ menu */
  --field-text-phone: 16px;
  /* Text size of every input, textarea and select below 760px, so iOS Safari does not zoom the */
  --field-grow-min: 46px;
  /* Least height of a field that grows with its text: one row (UI-042) */
  --field-grow-max: 214px;
  /* Most height of a field that grows with its text: eight rows, then it scrolls (UI-042) */
  --nav-heading: 28px;
  /* Height of a sidebar or drawer section heading row (UI-023, NavItem guideline) */
  --nav-icon: 20px;
  /* The icon column of a sidebar row: a 20px icon, a section heading's dot cell, the job ring  */
  --job-gauge: 40px;
  /* The sidebar job row's gauge (JobGauge guideline, UI-078): drawn over the 20px icon column, */
  --job-tip: 264px;
  /* Width of the job row's memory tooltip in the sidebar and the rail (UI-078) */
  --progress-track: 4px;
  /* Job progress bar height (Progress guideline) */
  --progress-share: 6px;
  /* Share bar height (Progress guideline) */
  /* Type families */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  /* Derived (S-D011): Aurora, Vivid */
  --aurora-1: #00c3ab;  /* from mark-echo */
  --aurora-2: #6b9afe;  /* from mark-mirage */
  --aurora-3: #ac95ff;  /* from mark-vibe */
  --aurora-4: #d88d93;  /* from the 50% mix of mark-vibe and brand */
  --aurora-5: #f88000;  /* from brand */
}