/*
 * Bramble design tokens, UI v3 (design/ui-v3/SPEC.md §2-3; rules in DESIGN.md). Palette A, warm black and
 * precise: warm neutrals, one soft-lime brand accent, and ten hue families that carry meaning (tool and
 * command kinds, asset kinds, statuses, code). A family paints marks (icons, dots, rails), inks (code,
 * terminal text, tags), tints and washes (kind chips); never body copy or large areas. src/design/tones.css
 * maps meanings to families through data-tone.
 * UI v4 (design/ui-v4/SPEC-H.md §D.3) adds the washes, the brand and remake gradients, two glows, a card
 * shadow, a scrim for text over covers, the hero type, and lifts the dark surfaces one step.
 * The dashboard and the remote page copy this file verbatim, so it must stay framework-free.
 * Theme selection: <html data-theme="light|dark|system">. "system" follows the OS.
 * The system-dark block is generated from the dark block, and the two copies are written, by
 * `node scripts/qa/sync-tokens.mjs`; never edit them by hand.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #FCFBF9;
  --bg-sidebar: #F4F2EF;
  --bg-elevated: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-subtle: #F2EFEC;
  --bg-inset: #EFECE8;
  --bg-hover: rgba(38, 30, 22, .05);
  --bg-active: rgba(38, 30, 22, .085);
  /* A dark shade over media (crop regions, framing boxes, scrims). Modal veils use --bg-veil. */
  --bg-overlay: rgba(18, 14, 10, .34);
  --bg-veil: rgba(244, 242, 239, .66);
  /* Lists and grids of rows on the canvas, and the small wells (masked keys, glyph tiles) inside them. */
  --bg-list: var(--bg-raised);
  --bg-well: var(--bg-subtle);
  --border: rgba(26, 23, 20, .085);
  --border-strong: rgba(26, 23, 20, .15);
  --border-focus: rgba(77, 112, 2, .9);
  --text: #1A1714;
  --text-2: #524D48;
  --text-3: #645F59;
  --text-4: #8A847D;
  --text-on-accent: #FFFFFF;
  --text-on-ink: #FFFFFF;
  --ink: #1A1714;
  --ink-hover: #2E2925;
  --accent: #4D7002;
  --accent-hover: #416100;
  --accent-ink: #3B5700;
  --accent-tint: rgba(77, 112, 2, .10);
  --accent-tint-2: rgba(77, 112, 2, .16);
  --berry-gradient: linear-gradient(135deg, #8FB43A 0%, #5E8A12 100%);
  /* Hue families (UI v3): mark (icons, dots, rails; >= 3:1), ink (text, code, tags; >= 4.5:1, also on
     its own tint), tint (11%) and line (32%). OKLCH hues 25 red ... 350 pink, stored as hex and rgba
     because the contrast gate and the theme editor read only those. Red is a step deeper than the
     preview's #E14343 so white reads on a danger fill (4.68:1). */
  --hue-red: #D6383A; --hue-red-ink: #B9232A; --hue-red-tint: rgba(214, 56, 58, .11); --hue-red-line: rgba(214, 56, 58, .32);
  --hue-orange: #C76000; --hue-orange-ink: #9C4A00; --hue-orange-tint: rgba(199, 96, 0, .11); --hue-orange-line: rgba(199, 96, 0, .32);
  --hue-amber: #A57500; --hue-amber-ink: #805A00; --hue-amber-tint: rgba(165, 117, 0, .11); --hue-amber-line: rgba(165, 117, 0, .32);
  --hue-lime: #698700; --hue-lime-ink: #526A00; --hue-lime-tint: rgba(105, 135, 0, .11); --hue-lime-line: rgba(105, 135, 0, .32);
  --hue-green: #00905E; --hue-green-ink: #007048; --hue-green-tint: rgba(0, 144, 94, .11); --hue-green-line: rgba(0, 144, 94, .32);
  --hue-cyan: #008A9B; --hue-cyan-ink: #006B79; --hue-cyan-tint: rgba(0, 138, 155, .11); --hue-cyan-line: rgba(0, 138, 155, .32);
  --hue-blue: #007FE2; --hue-blue-ink: #0062B1; --hue-blue-tint: rgba(0, 127, 226, .11); --hue-blue-line: rgba(0, 127, 226, .32);
  --hue-indigo: #6F6DEE; --hue-indigo-ink: #5651C8; --hue-indigo-tint: rgba(111, 109, 238, .11); --hue-indigo-line: rgba(111, 109, 238, .32);
  --hue-violet: #A35CD9; --hue-violet-ink: #8541B5; --hue-violet-tint: rgba(163, 92, 217, .11); --hue-violet-line: rgba(163, 92, 217, .32);
  --hue-pink: #D44695; --hue-pink-ink: #AF2776; --hue-pink-tint: rgba(212, 70, 149, .11); --hue-pink-line: rgba(212, 70, 149, .32);
  /* Washes (UI v4 §D.3): a family's mark at 16% fills a kind chip (22 px at most) or a 20 px pill under
     its ink glyph (>= 3:1 on the wash, gated). Glyphs only, never text. Stone is the neutral chip. */
  --hue-red-wash: rgba(214, 56, 58, .16);
  --hue-orange-wash: rgba(199, 96, 0, .16);
  --hue-amber-wash: rgba(165, 117, 0, .16);
  --hue-lime-wash: rgba(105, 135, 0, .16);
  --hue-green-wash: rgba(0, 144, 94, .16);
  --hue-cyan-wash: rgba(0, 138, 155, .16);
  --hue-blue-wash: rgba(0, 127, 226, .16);
  --hue-indigo-wash: rgba(111, 109, 238, .16);
  --hue-violet-wash: rgba(163, 92, 217, .16);
  --hue-pink-wash: rgba(212, 70, 149, .16);
  --stone-wash: rgba(38, 30, 22, .09);
  /* The brand gradient (lime, cyan, violet) on at most three moments: the Home hero word, the primary
     button that makes something (Button variant="make") and the credits ring. The remake gradient
     (cyan, indigo, pink) marks the TikTok band and the drop border while dragging. Their middle stop
     keeps the blend from going grey. Text or a glyph on either is --text-on-grad (gated on every stop). */
  --grad-brand: linear-gradient(115deg, #526A00, #006B79 52%, #8541B5);
  --grad-remake: linear-gradient(115deg, #006B79, #5A4FB8 50%, #AF2776);
  --text-on-grad: #FFFFFF;
  /* Send and the make button: a ring and a soft drop in the accent, whatever the theme knob picked. */
  --glow-brand: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--accent) 35%, transparent);
  /* Home and the empty chat: a faint lime glow at the top left, violet at the top right. */
  --glow-page: radial-gradient(620px 380px at 0% 0%, rgba(105, 135, 0, .07), transparent 70%), radial-gradient(680px 380px at 100% 0%, rgba(163, 92, 217, .08), transparent 70%);
  /* Cards, the composer and the band: one soft drop (dark adds a top highlight). */
  --shadow-card: 0 1px 2px rgba(26, 23, 20, .06), 0 12px 28px -20px rgba(26, 23, 20, .18);
  /* Text over a cover or a frame: the theme does not change a photo, so both themes use the dark scrim. */
  --scrim: linear-gradient(to top, rgba(8, 6, 4, .78), transparent 58%);
  /* Solid state chips: needs-you (amber) and a generated frame's badge (violet), each with its own text. */
  --needs-fill: var(--hue-amber-ink);
  --text-on-needs: #FFFFFF;
  --gen-fill: var(--hue-violet-ink);
  --text-on-gen: #FFFFFF;
  /* Statuses point at their families (names kept, so feature CSS keeps working). */
  --success: var(--hue-green);
  --success-tint: var(--hue-green-tint);
  --warning: var(--hue-amber);
  --warning-tint: var(--hue-amber-tint);
  --danger: var(--hue-red);
  --danger-tint: var(--hue-red-tint);
  --info: var(--hue-blue);
  --info-tint: var(--hue-blue-tint);
  --provider-codex: #18171D;
  /* Claude's coral sits in the orange family. */
  --provider-claude: var(--hue-orange);
  /* Depth comes from lightness and one hairline; shadows are warm and only lift floating things. */
  --shadow-1: 0 0 0 1px var(--border);
  --shadow-pop: 0 18px 44px -16px rgba(26, 23, 20, .22), 0 2px 6px -2px rgba(26, 23, 20, .06), 0 0 0 1px var(--border-strong);
  --shadow-dialog: 0 32px 80px -24px rgba(26, 23, 20, .30), 0 0 0 1px var(--border-strong);
  --shadow-composer: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 24px -14px rgba(26, 23, 20, .14), 0 0 0 1px var(--border-strong);
  --shadow-segment: 0 1px 2px rgba(26, 23, 20, .08), 0 0 0 1px var(--border);
  --shadow-tooltip: 0 6px 16px -6px rgba(26, 23, 20, .32);
  /* The floating panel (UI v3 §1.1): a rounded card laid over the window, one step above it. */
  --bg-panel: var(--bg-elevated);
  --shadow-panel: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(26, 23, 20, .05), 0 18px 44px -26px rgba(26, 23, 20, .22);
  /* Derived (kept as aliases so components never hard-code colors). */
  --scrollbar-thumb: var(--border-strong);
  --selection: rgba(77, 112, 2, .18);
  --code-bg: var(--bg-subtle);
  --diff-add: var(--hue-green-tint);
  --diff-add-text: var(--hue-green-ink);
  --diff-del: var(--hue-red-tint);
  --diff-del-text: var(--hue-red-ink);
  --success-ink: var(--hue-green-ink);
  --warning-ink: var(--hue-amber-ink);
  --danger-ink: var(--hue-red-ink);
  --info-ink: var(--hue-blue-ink);
  --text-on-danger: #FFFFFF;
  --tooltip-bg: #1A1714;
  --tooltip-text: #F4F4F6;
  --switch-thumb-off: #FFFFFF;
  --switch-thumb-on: var(--text-on-accent);
  /* Quiet surfaces (UI v2 names; aliases, so the theme editor's knobs carry through). */
  --bg-window: var(--bg-sidebar);
  --bg-base: var(--bg-canvas);
  --bg-sunk: var(--bg-inset);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --focus-ring: 0 0 0 2px var(--border-focus);
  --focus-ring-field: inset 0 0 0 1px var(--border-focus), 0 0 0 3px var(--accent-tint);
  /* Timeline clip fills by track (UI review 06 A): picture, still, text, music, voice, generated. */
  --track-video: #6289B5;
  --track-image: #5BA09F;
  --track-text: #D7B16A;
  --track-audio: #609C71;
  --track-voice: #AF80AD;
  --track-gen: #7F9650;
  --track-ink: #1D1406;
  --stage: #15110E;
  --track-label: rgba(255, 255, 255, .94);
  /* Code syntax (chat/highlight.mjs token types): the families' inks, so every pair is gated with
     them, on code surfaces and on the diff tints alike. */
  --syn-keyword: var(--hue-violet-ink);
  --syn-string: var(--hue-green-ink);
  --syn-number: var(--hue-orange-ink);
  --syn-literal: var(--hue-orange-ink);
  --syn-comment: var(--text-3);
  --syn-function: var(--hue-blue-ink);
  --syn-type: var(--hue-pink-ink);
  --syn-attr: var(--hue-amber-ink);
  --syn-tag: var(--hue-red-ink);
  --syn-variable: var(--hue-cyan-ink);
  --syn-property: var(--hue-indigo-ink);
  --syn-punct: var(--text-2);
  /* A shell command line (highlight.mjs highlightCommand): flags muted, paths in the web's cyan; the
     program keeps the text colour. */
  --syn-flag: var(--text-3);
  --syn-path: var(--hue-cyan-ink);
  /* Labels, line numbers and prompts on code surfaces. */
  --code-muted: var(--text-3);
  /* UI v4: a card that sits on the page in the light theme lifts on a soft shadow (the window and the
     canvas are too close to separate it by fill alone). */
  --shadow-card: 0 1px 2px rgba(38, 30, 22, .06), 0 6px 18px rgba(38, 30, 22, .07);
  --shadow-card-hover: 0 2px 4px rgba(38, 30, 22, .08), 0 12px 28px rgba(38, 30, 22, .11);
  /* The deep end of a cover gradient, and the scrim under a cover's caption. */
  --cover-deep: #2A2036;
  --cover-scrim: linear-gradient(180deg, rgba(12, 9, 7, 0) 40%, rgba(12, 9, 7, .72) 100%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* UI v4 §D.2.12: every surface one step lighter than v3 (window #0B0907, canvas #120F0C, elevated
     #1A1613, raised #221D19), so cards and the composer read as depth, not one flat black. */
  --bg-canvas: #14100D;
  --bg-sidebar: #0E0B09;
  --bg-elevated: #1D1814;
  --bg-raised: #251F1A;
  --bg-subtle: #1D1814;
  --bg-inset: #0F0C0A;
  --bg-hover: rgba(255, 247, 240, .05);
  --bg-active: rgba(255, 247, 240, .085);
  --bg-overlay: rgba(0, 0, 0, .6);
  --bg-veil: rgba(8, 6, 4, .62);
  --bg-list: var(--bg-subtle);
  --bg-well: var(--bg-inset);
  --border: rgba(255, 244, 232, .07);
  --border-strong: rgba(255, 244, 232, .12);
  --border-focus: rgba(174, 208, 96, .6);
  --text: #F2EEE8;
  --text-2: #C4BDB5;
  --text-3: #A09991;
  --text-4: #827B74;
  --ink: #F3EFED;
  --ink-hover: #FFFFFF;
  --text-on-ink: #120E0B;
  /* Warm black + soft lime. Dark text on the lime fill. */
  --text-on-accent: #0B0F03;
  --accent: #AED060;
  --accent-hover: #BDE171;
  --accent-ink: #C2E380;
  --accent-tint: rgba(174, 208, 96, .13);
  --accent-tint-2: rgba(174, 208, 96, .22);
  /* Hue families: tint 15%, line 34%. The red ink is a step lighter than v3's #FF847D, so it holds 4.5:1
     on its tint over the lifted raised surface. */
  --hue-red: #F0655F; --hue-red-ink: #FF8C86; --hue-red-tint: rgba(240, 101, 95, .15); --hue-red-line: rgba(240, 101, 95, .34);
  --hue-orange: #F08439; --hue-orange-ink: #FFA063; --hue-orange-tint: rgba(240, 132, 57, .15); --hue-orange-line: rgba(240, 132, 57, .34);
  --hue-amber: #E8AB31; --hue-amber-ink: #FAC053; --hue-amber-tint: rgba(232, 171, 49, .15); --hue-amber-line: rgba(232, 171, 49, .34);
  --hue-lime: #A6CB4E; --hue-lime-ink: #B6DB66; --hue-lime-tint: rgba(166, 203, 78, .15); --hue-lime-line: rgba(166, 203, 78, .34);
  --hue-green: #49C98E; --hue-green-ink: #66DCA3; --hue-green-tint: rgba(73, 201, 142, .15); --hue-green-line: rgba(73, 201, 142, .34);
  --hue-cyan: #2EC2D8; --hue-cyan-ink: #54D5EA; --hue-cyan-tint: rgba(46, 194, 216, .15); --hue-cyan-line: rgba(46, 194, 216, .34);
  --hue-blue: #53A2F6; --hue-blue-ink: #80BCFF; --hue-blue-tint: rgba(83, 162, 246, .15); --hue-blue-line: rgba(83, 162, 246, .34);
  --hue-indigo: #8B8FF4; --hue-indigo-ink: #A5ABFF; --hue-indigo-tint: rgba(139, 143, 244, .15); --hue-indigo-line: rgba(139, 143, 244, .34);
  --hue-violet: #BA81E9; --hue-violet-ink: #D19CFF; --hue-violet-tint: rgba(186, 129, 233, .15); --hue-violet-line: rgba(186, 129, 233, .34);
  --hue-pink: #E571AC; --hue-pink-ink: #FE8DC5; --hue-pink-tint: rgba(229, 113, 172, .15); --hue-pink-line: rgba(229, 113, 172, .34);
  /* Washes: 24% of the mark. */
  --hue-red-wash: rgba(240, 101, 95, .24);
  --hue-orange-wash: rgba(240, 132, 57, .24);
  --hue-amber-wash: rgba(232, 171, 49, .24);
  --hue-lime-wash: rgba(166, 203, 78, .24);
  --hue-green-wash: rgba(73, 201, 142, .24);
  --hue-cyan-wash: rgba(46, 194, 216, .24);
  --hue-blue-wash: rgba(83, 162, 246, .24);
  --hue-indigo-wash: rgba(139, 143, 244, .24);
  --hue-violet-wash: rgba(186, 129, 233, .24);
  --hue-pink-wash: rgba(229, 113, 172, .24);
  --stone-wash: rgba(255, 247, 240, .12);
  --grad-brand: linear-gradient(115deg, #B6DB66, #54D5EA 52%, #D19CFF);
  --grad-remake: linear-gradient(115deg, #2EC2D8, #8E97F2 50%, #E571AC);
  --text-on-grad: #0B0F03;
  --glow-brand: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-page: radial-gradient(620px 380px at 0% 0%, rgba(174, 208, 96, .10), transparent 70%), radial-gradient(680px 380px at 100% 0%, rgba(186, 129, 233, .12), transparent 70%);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -28px rgba(0, 0, 0, .8);
  --needs-fill: var(--hue-amber);
  --text-on-needs: #1A1205;
  --gen-fill: var(--hue-violet);
  --text-on-gen: #170B26;
  /* The light codex ink would vanish on warm black. */
  --provider-codex: #F3EFED;
  --shadow-1: 0 0 0 1px var(--border);
  --shadow-pop: 0 20px 48px -12px rgba(0, 0, 0, .72), 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-dialog: 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-composer: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px var(--border-strong);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-tooltip: 0 8px 20px -6px rgba(0, 0, 0, .6), 0 0 0 1px var(--border-strong);
  --bg-panel: var(--bg-canvas);
  --shadow-panel: 0 0 0 1px var(--border-strong), 0 2px 6px -2px rgba(0, 0, 0, .40), 0 24px 56px -28px rgba(0, 0, 0, .75);
  --selection: rgba(174, 208, 96, .28);
  --text-on-danger: #1A0B0B;
  --tooltip-bg: #2C2724;
  --tooltip-text: #F3EFED;
  --switch-thumb-off: #A9A39E;
  --track-video: #5377A0;
  --track-image: #488D8D;
  --track-text: #BC9956;
  --track-audio: #549065;
  --track-voice: #A274A0;
  --track-gen: #6E843E;
  --track-ink: #1D1406;
  --stage: #0C0A08;
  --track-label: rgba(255, 255, 255, .92);
  /* UI v4: cards lift on a ring and a deep shadow in the dark theme. */
  --shadow-card: 0 0 0 1px rgba(255, 245, 235, .05), 0 6px 18px rgba(0, 0, 0, .28);
  --shadow-card-hover: 0 0 0 1px rgba(255, 245, 235, .09), 0 12px 30px rgba(0, 0, 0, .42);
  --cover-deep: #120F0C;
  --cover-scrim: linear-gradient(180deg, rgba(12, 9, 7, 0) 40%, rgba(12, 9, 7, .78) 100%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    /* UI v4 §D.2.12: every surface one step lighter than v3 (window #0B0907, canvas #120F0C, elevated
       #1A1613, raised #221D19), so cards and the composer read as depth, not one flat black. */
    --bg-canvas: #14100D;
    --bg-sidebar: #0E0B09;
    --bg-elevated: #1D1814;
    --bg-raised: #251F1A;
    --bg-subtle: #1D1814;
    --bg-inset: #0F0C0A;
    --bg-hover: rgba(255, 247, 240, .05);
    --bg-active: rgba(255, 247, 240, .085);
    --bg-overlay: rgba(0, 0, 0, .6);
    --bg-veil: rgba(8, 6, 4, .62);
    --bg-list: var(--bg-subtle);
    --bg-well: var(--bg-inset);
    --border: rgba(255, 244, 232, .07);
    --border-strong: rgba(255, 244, 232, .12);
    --border-focus: rgba(174, 208, 96, .6);
    --text: #F2EEE8;
    --text-2: #C4BDB5;
    --text-3: #A09991;
    --text-4: #827B74;
    --ink: #F3EFED;
    --ink-hover: #FFFFFF;
    --text-on-ink: #120E0B;
    /* Warm black + soft lime. Dark text on the lime fill. */
    --text-on-accent: #0B0F03;
    --accent: #AED060;
    --accent-hover: #BDE171;
    --accent-ink: #C2E380;
    --accent-tint: rgba(174, 208, 96, .13);
    --accent-tint-2: rgba(174, 208, 96, .22);
    /* Hue families: tint 15%, line 34%. The red ink is a step lighter than v3's #FF847D, so it holds 4.5:1
       on its tint over the lifted raised surface. */
    --hue-red: #F0655F; --hue-red-ink: #FF8C86; --hue-red-tint: rgba(240, 101, 95, .15); --hue-red-line: rgba(240, 101, 95, .34);
    --hue-orange: #F08439; --hue-orange-ink: #FFA063; --hue-orange-tint: rgba(240, 132, 57, .15); --hue-orange-line: rgba(240, 132, 57, .34);
    --hue-amber: #E8AB31; --hue-amber-ink: #FAC053; --hue-amber-tint: rgba(232, 171, 49, .15); --hue-amber-line: rgba(232, 171, 49, .34);
    --hue-lime: #A6CB4E; --hue-lime-ink: #B6DB66; --hue-lime-tint: rgba(166, 203, 78, .15); --hue-lime-line: rgba(166, 203, 78, .34);
    --hue-green: #49C98E; --hue-green-ink: #66DCA3; --hue-green-tint: rgba(73, 201, 142, .15); --hue-green-line: rgba(73, 201, 142, .34);
    --hue-cyan: #2EC2D8; --hue-cyan-ink: #54D5EA; --hue-cyan-tint: rgba(46, 194, 216, .15); --hue-cyan-line: rgba(46, 194, 216, .34);
    --hue-blue: #53A2F6; --hue-blue-ink: #80BCFF; --hue-blue-tint: rgba(83, 162, 246, .15); --hue-blue-line: rgba(83, 162, 246, .34);
    --hue-indigo: #8B8FF4; --hue-indigo-ink: #A5ABFF; --hue-indigo-tint: rgba(139, 143, 244, .15); --hue-indigo-line: rgba(139, 143, 244, .34);
    --hue-violet: #BA81E9; --hue-violet-ink: #D19CFF; --hue-violet-tint: rgba(186, 129, 233, .15); --hue-violet-line: rgba(186, 129, 233, .34);
    --hue-pink: #E571AC; --hue-pink-ink: #FE8DC5; --hue-pink-tint: rgba(229, 113, 172, .15); --hue-pink-line: rgba(229, 113, 172, .34);
    /* Washes: 24% of the mark. */
    --hue-red-wash: rgba(240, 101, 95, .24);
    --hue-orange-wash: rgba(240, 132, 57, .24);
    --hue-amber-wash: rgba(232, 171, 49, .24);
    --hue-lime-wash: rgba(166, 203, 78, .24);
    --hue-green-wash: rgba(73, 201, 142, .24);
    --hue-cyan-wash: rgba(46, 194, 216, .24);
    --hue-blue-wash: rgba(83, 162, 246, .24);
    --hue-indigo-wash: rgba(139, 143, 244, .24);
    --hue-violet-wash: rgba(186, 129, 233, .24);
    --hue-pink-wash: rgba(229, 113, 172, .24);
    --stone-wash: rgba(255, 247, 240, .12);
    --grad-brand: linear-gradient(115deg, #B6DB66, #54D5EA 52%, #D19CFF);
    --grad-remake: linear-gradient(115deg, #2EC2D8, #8E97F2 50%, #E571AC);
    --text-on-grad: #0B0F03;
    --glow-brand: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent);
    --glow-page: radial-gradient(620px 380px at 0% 0%, rgba(174, 208, 96, .10), transparent 70%), radial-gradient(680px 380px at 100% 0%, rgba(186, 129, 233, .12), transparent 70%);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -28px rgba(0, 0, 0, .8);
    --needs-fill: var(--hue-amber);
    --text-on-needs: #1A1205;
    --gen-fill: var(--hue-violet);
    --text-on-gen: #170B26;
    /* The light codex ink would vanish on warm black. */
    --provider-codex: #F3EFED;
    --shadow-1: 0 0 0 1px var(--border);
    --shadow-pop: 0 20px 48px -12px rgba(0, 0, 0, .72), 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255, 255, 255, .04);
    --shadow-dialog: 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--border-strong), inset 0 1px 0 rgba(255, 255, 255, .04);
    --shadow-composer: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px var(--border-strong);
    --shadow-segment: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-tooltip: 0 8px 20px -6px rgba(0, 0, 0, .6), 0 0 0 1px var(--border-strong);
    --bg-panel: var(--bg-canvas);
    --shadow-panel: 0 0 0 1px var(--border-strong), 0 2px 6px -2px rgba(0, 0, 0, .40), 0 24px 56px -28px rgba(0, 0, 0, .75);
    --selection: rgba(174, 208, 96, .28);
    --text-on-danger: #1A0B0B;
    --tooltip-bg: #2C2724;
    --tooltip-text: #F3EFED;
    --switch-thumb-off: #A9A39E;
    --track-video: #5377A0;
    --track-image: #488D8D;
    --track-text: #BC9956;
    --track-audio: #549065;
    --track-voice: #A274A0;
    --track-gen: #6E843E;
    --track-ink: #1D1406;
    --stage: #0C0A08;
    --track-label: rgba(255, 255, 255, .92);
    /* UI v4: cards lift on a ring and a deep shadow in the dark theme. */
    --shadow-card: 0 0 0 1px rgba(255, 245, 235, .05), 0 6px 18px rgba(0, 0, 0, .28);
    --shadow-card-hover: 0 0 0 1px rgba(255, 245, 235, .09), 0 12px 30px rgba(0, 0, 0, .42);
    --cover-deep: #120F0C;
    --cover-scrim: linear-gradient(180deg, rgba(12, 9, 7, 0) 40%, rgba(12, 9, 7, .78) 100%);
  }
}

/* Type, space, radius, layout (SPEC §2). Theme independent. */
:root {
  /* Plus Jakarta Sans for Latin, the bundled Noto Sans SC subset ("Noto Sans SC UI") for Chinese, then the
     system CJK faces. Geist Mono only for code, commands, timecode and numbers in tables. */
  --font-sans: "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* UI v4 colour with area (DESIGN.md, Colour): one gradient per category, from the hue family marks
     at 135 degrees, so they follow the theme. Covers use the --cover-* variants, which fall to a deep
     end so a light caption reads on them. Category chips use the family at 18% (color-mix). */
  --grad-video: linear-gradient(135deg, var(--hue-blue), var(--hue-indigo));
  --grad-social: linear-gradient(135deg, var(--hue-pink), var(--hue-violet));
  --grad-publish: linear-gradient(135deg, var(--hue-orange), var(--hue-amber));
  --grad-audio: linear-gradient(135deg, var(--hue-green), var(--hue-cyan));
  --grad-ai: linear-gradient(135deg, var(--hue-violet), var(--hue-indigo));
  --cover-video: linear-gradient(160deg, var(--hue-blue) 0%, color-mix(in oklab, var(--hue-indigo) 45%, var(--cover-deep)) 100%);
  --cover-social: linear-gradient(160deg, var(--hue-pink) 0%, color-mix(in oklab, var(--hue-violet) 45%, var(--cover-deep)) 100%);
  --cover-publish: linear-gradient(160deg, var(--hue-orange) 0%, color-mix(in oklab, var(--hue-amber) 40%, var(--cover-deep)) 100%);
  --cover-audio: linear-gradient(160deg, var(--hue-green) 0%, color-mix(in oklab, var(--hue-cyan) 45%, var(--cover-deep)) 100%);
  --cover-ai: linear-gradient(160deg, var(--hue-violet) 0%, color-mix(in oklab, var(--hue-indigo) 45%, var(--cover-deep)) 100%);
  --cover-brand: linear-gradient(160deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 40%, var(--cover-deep)) 100%);
  --font-mono: "Geist Mono", "Noto Sans SC UI", ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;

  /* Type scale (UI v3 SPEC §3): size / line / tracking, plus a weight per role. Every role sits one step
     under v2 (body 15 -> 14), the way Claude Desktop reads; micro stays 11, the floor for Chinese. */
  /* The Home hero line only (UI v4 §B.2). */
  --text-hero: 40px; --leading-hero: 44px; --tracking-hero: -0.036em; --weight-hero: 600;
  --text-display: 30px; --leading-display: 36px; --tracking-display: -0.034em; --weight-display: 600;
  --text-title-1: 20px; --leading-title-1: 28px; --tracking-title-1: -0.022em;
  --text-title-2: 15px; --leading-title-2: 22px; --tracking-title-2: -0.012em;
  --weight-title: 600;
  --text-body: 14px; --leading-body: 22px; --tracking-body: -0.004em; --weight-body: 400;
  --text-reading: 14px; --leading-reading: 22px; --tracking-reading: -0.004em;
  --text-control: 13px; --leading-control: 18px; --tracking-control: -0.002em; --weight-control: 500;
  --text-caption: 12px; --leading-caption: 16px; --tracking-caption: 0em;
  --text-micro: 11px; --leading-micro: 14px; --tracking-micro: 0.01em; --weight-micro: 500;
  /* Code, commands, terminal output and diffs (Geist Mono, no tracking). */
  --text-code: 12.5px; --leading-code: 19px;
  /* Markdown headings, relative to the reading size (Settings › Appearance moves it): at 14px they
     read 18/26, 16/24, 14/22 and 13/20. */
  --md-h1: 1.2857em; --leading-md-h1: 1.4444;
  --md-h2: 1.1429em; --leading-md-h2: 1.5;
  --md-h3: 1em; --leading-md-h3: 1.5714;
  --md-h4: .9286em; --leading-md-h4: 1.5385;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;

  --control-sm: 28px; --control-md: 32px; --control-lg: 36px; --control-xl: 44px; --control-send: 32px;

  /* Corners: controls 8, panels 10, popovers, dialogs and the window 12, the composer 16, chips pill. */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 999px;
  --radius-control: var(--radius-md);
  --radius-panel: var(--radius-lg);
  --radius-popover: var(--radius-xl);
  --radius-dialog: var(--radius-xl);
  --radius-window: var(--radius-xl);
  --radius-chip: var(--radius-full);

  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px;
  /* Glyph line weight. Bramble Glyphs draw at 1.5 at every size (docs/ui-v2/glyphs/README.md). */
  --icon-stroke: 1.5;

  --sidebar-width: 260px; --sidebar-min: 220px; --sidebar-max: 360px;
  --inspector-width: 340px;
  --header-height: 48px;
  /* UI v2 window (SPEC §3): 40px chrome, a 760px chat column, 960px pages, a 300px sessions drawer. */
  --chrome-height: 40px;
  /* The floating panel (UI v3 §1.1): inset from the window's top, right and bottom, a 36px head. */
  --panel-head-height: 36px;
  --panel-inset: 8px; --panel-inset-top: 6px;
  --radius-float: var(--radius-xl);
  --thread-max: 760px;
  --page-max: 960px;
  --drawer-width: 300px;

  /* Semantic stacking scale; never use raw z-index values in components. */
  --z-raised: 1; --z-sticky: 10; --z-chrome: 20; --z-floating: 40;
  --z-overlay: 200; --z-dialog: 210; --z-popover: 300; --z-toast: 400; --z-tooltip: 500;
}

/* Chinese gets no negative tracking (SPEC §2): every tracking token resets for zh text. Its curly double
   quotes and ellipsis take the CJK shapes (fonts.css "Noto Sans SC UI Punctuation"). */
:root:lang(zh),
:lang(zh) {
  --tracking-hero: 0em; --tracking-display: 0em; --tracking-title-1: 0em; --tracking-title-2: 0em;
  --tracking-body: 0em; --tracking-reading: 0em; --tracking-control: 0em;
  --font-sans: "Noto Sans SC UI Punctuation", "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Noto Sans SC UI Punctuation", "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Traditional Chinese, Japanese, Korean and Thai (docs/i18n.md): no negative tracking either, and their
   own faces before the Simplified Chinese subset, which would otherwise draw every Han character (a
   Japanese kanji in its Chinese form, a Traditional one from the wrong family). macOS faces first, then
   Windows, then the Noto families Linux has; Plus Jakarta Sans still draws the Latin letters. */
:root:lang(zh-TW), :lang(zh-TW),
:root:lang(ja), :lang(ja),
:root:lang(ko), :lang(ko),
:root:lang(th), :lang(th) {
  --tracking-hero: 0em; --tracking-display: 0em; --tracking-title-1: 0em; --tracking-title-2: 0em;
  --tracking-body: 0em; --tracking-reading: 0em; --tracking-control: 0em;
}
:root:lang(zh-TW), :lang(zh-TW) {
  --font-sans: "Noto Sans SC UI Punctuation", "Plus Jakarta Sans", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-sans);
}
:root:lang(ja), :lang(ja) {
  --font-sans: "Plus Jakarta Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo UI", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-sans);
}
:root:lang(ko), :lang(ko) {
  --font-sans: "Plus Jakarta Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-sans);
}
:root:lang(th), :lang(th) {
  --font-sans: "Plus Jakarta Sans", "Thonburi", "Leelawadee UI", "Leelawadee", "Noto Sans Thai UI", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-sans);
}

/* Latin text in a Chinese window (contentLang() marks replies, bubbles, chat titles and rows
   lang="en"): the :root values come back, the Latin-first stack without the CJK punctuation face
   and the Latin tracking, so "I’ll", “quotes” and a cut-off title's … keep their narrow shapes.
   base.css re-resolves the face on the marked element. Same values as :root above. */
[lang|="en"]:not(html) {
  --tracking-hero: -0.036em; --tracking-display: -0.034em; --tracking-title-1: -0.022em; --tracking-title-2: -0.012em;
  --tracking-body: -0.004em; --tracking-reading: -0.004em; --tracking-control: -0.002em;
  --font-sans: "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Plus Jakarta Sans", "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Compact density tightens rows and controls, never type. */
:root[data-density="compact"] {
  --control-sm: 26px; --control-md: 28px; --control-lg: 32px;
  --row-height: 28px;
}
:root { --row-height: 32px; }