/* Tolstoy Compose — current UI system tokens.
   One source of truth for the reduced editorial design language: shape, type,
   spacing, surfaces, controls, motion, viewport, and accessibility boundaries. */
@layer tokens {
  :root {
    color-scheme: light;

    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Reduced type roles. Keep feature/component typography mapped through these roles. */
    --type-size-meta: 12px;
    --type-size-control: 14px;
    --type-size-body: 14px;
    --type-size-heading: 16px;
    --type-line-meta: 1.28;
    --type-line-control: 1.35;
    --type-line-body: 1.45;
    --type-line-heading: 1.22;
    --type-weight-regular: 400;
    --type-weight-strong: 600;

    --ui-font-size: var(--type-size-control);
    --ui-font-size-compact: var(--type-size-meta);
    --ui-line-height: var(--type-line-body);
    --ui-font-weight: var(--type-weight-regular);
    --ui-font-weight-strong: var(--type-weight-strong);
    --ui-field-font-size: var(--type-size-control);
    --ui-field-line-height: var(--type-line-control);
    --ui-field-font-weight: var(--type-weight-regular);

    --doc-body-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-heading-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-font-size: 17px;
    --doc-line-height: 1.50;
    --doc-paragraph-spacing: 0.70em;
    --doc-line-width: 544px;
    --doc-line-half-width: 272px;
    --doc-body-color: var(--doc-body-text);
    --doc-heading-color: var(--doc-heading-text);
    /* Heading scale is relative to the selected document body size. */
    --doc-h1-size: 2em;
    --doc-h2-size: 1.5em;
    --doc-h3-size: 1.25em;
    --doc-h4-size: 1.125em;
    --doc-h5-size: 1em;
    --doc-h6-size: 1em;
    --doc-note-font-size: clamp(13px, 0.90em, 24px);
    --doc-note-label-size: clamp(12px, 0.74em, 16px);
    --doc-note-line-height: 1.50;

    --ed-body-font: var(--doc-body-font);
    --ed-heading-font: var(--doc-heading-font);
    --ed-font-size: var(--doc-font-size);
    --ed-line-height: var(--doc-line-height);
    --ed-paragraph-spacing: var(--doc-paragraph-spacing);
    --ed-line-width: var(--doc-line-width);
    --ed-line-half-width: var(--doc-line-half-width);
    --ed-body-color: var(--doc-body-color);
    --ed-heading-color: var(--doc-heading-color);
    --ed-h1-size: var(--doc-h1-size);
    --ed-h2-size: var(--doc-h2-size);
    --ed-h3-size: var(--doc-h3-size);
    --ed-h4-size: var(--doc-h4-size);
    --ed-h5-size: var(--doc-h5-size);
    --ed-h6-size: var(--doc-h6-size);
    --ed-note-font-size: var(--doc-note-font-size);
    --ed-note-label-size: var(--doc-note-label-size);
    --ed-note-line-height: var(--doc-note-line-height);

    /* Reduced spacing roles. Use calc() from these roles only when a larger
       layout boundary is required, rather than introducing another token. */
    --space-tight: 4px;
    --space-related: 8px;
    --space-cluster: 12px;
    --space-section: 16px;

    /* Reduced shape roles. Rounded rectangles are default; true pills are not
       a design-system token. Use percentages only for intrinsically circular
       marks such as status dots. */
    --shape-technical: 4px;
    --shape-control: 10px;
    --shape-card: 14px;
    --shape-panel: 18px;

    --topbar-h: 48px;
    --toolbar-h: 44px;

    --sidebar-min-w: 320px;
    --sidebar-ideal-w: 27vw;
    --sidebar-max-w: 420px;
    --sidebar-w: clamp(var(--sidebar-min-w), var(--sidebar-ideal-w), var(--sidebar-max-w));
    --sidebar-overlay-w: clamp(320px, 46vw, 410px);
    --sidebar-overlay-max-inline: calc(100vw - 64px);

    --app-viewport-inline: 100vw;
    --app-viewport-block: 100vh;
    --app-small-viewport-block: 100vh;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-layout-viewport-block: var(--app-viewport-block);
    --app-visual-viewport-block: var(--app-small-viewport-block);
    --app-visual-viewport-inline: 100vw;
    --app-visual-viewport-offset-top: 0px;
    --app-visual-viewport-offset-left: 0px;
    --app-visual-viewport-center-inline: 50vw;
    --app-visual-viewport-bottom-edge: var(--app-visual-viewport-block);
    --app-shell-block-size: var(--app-layout-viewport-block);
    --app-keyboard-safe-block: var(--app-visual-viewport-block);
    --app-shell-inline-size: 100%;
    --app-editor-paper-min-block-size: calc(var(--app-small-viewport-block) - var(--topbar-h) - var(--toolbar-h) - 88px);

    --control-height: 32px;
    --small-control-height: 28px;
    --touch-target: 44px;
    --control-block-size: max(40px, var(--control-height));
    --control-touch-target: max(44px, var(--touch-target));
    --accessibility-hit-target-min: var(--touch-target);

    --surface-overlay-viewport-gap: var(--space-cluster);
    --surface-overlay-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--surface-overlay-viewport-gap))), 72dvh);
    --surface-notice-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - var(--topbar-h) - var(--toolbar-h) - (4 * var(--space-cluster))), 520px);
    --surface-command-palette-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - 10dvh - (2 * var(--space-cluster))), 720px);
    --surface-modal-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--space-section))), 720px);
    --surface-sheet-max-inline: 560px;
    --surface-sheet-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--space-section))), 640px);
    --sidebar-action-target: max(var(--control-height), 36px);
    --sidebar-coarse-action-target: var(--touch-target);

    /* Reduced motion roles. Future motion work should extend behaviour through
       these jobs rather than creating local duration/easing systems. */
    --motion-duration-micro: 110ms;
    --motion-duration-state: 140ms;
    --motion-duration-exit: 130ms;
    --motion-duration-surface: 170ms;
    --motion-duration-panel-sheet: 240ms;
    --motion-duration-reduced: 1ms;
    --motion-ease-standard: cubic-bezier(.2, 0, .2, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
    --motion-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --motion-distance-reveal: 6px;
    --motion-distance-surface: 10px;
    --motion-distance-sheet: 18px;
    --motion-scale-reveal: .985;
    --motion-scale-press: .968;

    --z-toolbar: 20;
    --z-topbar: 30;
    --z-overlay: 60;
    --z-sidebar: 70;
    --z-popover: 80;
    --z-modal: 90;
    --z-toast: 100;
    --z-tip: 110;
    --z-window-separator: 120;

    --sidebar-sheet-snap-min: .42;
    --sidebar-sheet-snap-default: .72;
    --sidebar-sheet-snap-max: .92;
    --sidebar-sheet-default-snap-index: 2;
    --sidebar-sheet-closed-translate-y: 105%;
    --sidebar-sheet-closed-transform: translateY(var(--sidebar-sheet-closed-translate-y));
    --sidebar-sheet-closed-block-size: min(calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-default)), 640px);
    --sidebar-sheet-open-block-size: min(calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-max)), calc(var(--app-viewport-block) - var(--app-safe-top)));
    --sidebar-sheet-open-transform: none;
    --sidebar-sheet-max-block-fraction: .92;
    --sidebar-sheet-drag-zone: 28px;
    --sidebar-sheet-motion-duration: var(--motion-duration-panel-sheet);
    --sidebar-sheet-motion-easing: var(--motion-ease-emphasized);

    /* Calm editorial colour system.
       One warm-neutral scale governs every structural relationship. The app
       ground and editor surround intentionally share one value, the document
       is the quietest light surface, and utility layers rise in small,
       controlled luminance steps. Accent is state, never architecture. */
    --colour-ink-950: #1F1E1B;
    --colour-ink-800: #45423C;
    --colour-ink-650: #706B63;
    --colour-ink-450: #9D978E;
    --colour-stone-500: #BDB9AF;
    --colour-stone-400: #D8D5CC;
    --colour-stone-300: #E4E2DB;
    --colour-linen-250: #ECEDE8;
    --colour-linen-225: #EFEEE9;
    --colour-linen-200: #F2F1EC;
    --colour-linen-150: #F5F4EF;
    --colour-linen-100: #F7F6F1;
    --colour-linen-75: #F9F8F4;
    --colour-linen-50: #FCFBF8;
    /* Warm ink and mineral scale. The undertone is deliberately restrained:
       red and green remain close, with blue reduced only enough to avoid the
       generic blue-grey cast of conventional SaaS dark themes. */
    --colour-night-950: #171715;
    --colour-night-900: #1F1F1C;
    --colour-night-850: #24231F;
    --colour-night-825: #292824;
    --colour-night-800: #302F2A;
    --colour-night-750: #393832;
    --colour-night-text: #F4F1EA;
    --colour-night-text-sec: #D8D2C7;
    --colour-night-text-muted: #AAA398;
    --colour-night-text-disabled: #827C72;

    --surface-document-paper: var(--colour-linen-75);
    --surface-document-paper-dark: var(--colour-night-825);
    --surface-app-ground: var(--colour-linen-250);
    --surface-canvas: var(--surface-app-ground);
    --surface-panel: var(--colour-linen-200);
    --surface-card: var(--colour-linen-100);
    --surface-field: var(--colour-linen-50);
    --surface-floating: var(--colour-linen-150);
    --surface-floating-chrome: var(--colour-linen-225);
    --surface-scrim: rgb(31 30 27 / 0.34);
    --surface-document-boundary: color-mix(in srgb, var(--colour-ink-950) 8%, transparent);
    --surface-workspace-divider: color-mix(in srgb, var(--colour-ink-950) 11%, transparent);
    --surface-window-separator: color-mix(in srgb, var(--colour-ink-950) 18%, transparent);
    --surface-sidebar-shell-base: var(--surface-panel);
    --surface-sidebar-shell: var(--surface-sidebar-shell-base);
    --surface-sidebar-card: var(--surface-card);
    --surface-sidebar-shell-border: color-mix(in srgb, var(--colour-ink-950) 12%, transparent);
    --surface-sidebar-shell-shadow: 0 18px 44px rgb(31 30 27 / 0.08), 0 2px 8px rgb(31 30 27 / 0.04);
    --surface-inspector-shell: var(--surface-floating);
    --surface-inspector-shell-border: var(--surface-sidebar-shell-border);
    --surface-inspector-shell-shadow: 0 16px 40px rgb(31 30 27 / 0.09), 0 2px 8px rgb(31 30 27 / 0.05);
    --surface-notice: var(--surface-panel);
    --surface-border: color-mix(in srgb, var(--colour-ink-950) 14%, transparent);
    --surface-border-strong: color-mix(in srgb, var(--colour-ink-950) 25%, transparent);
    --surface-filter-floating: none;

    --elevation-control: 0 1px 1px rgb(31 30 27 / 0.04);
    --elevation-floating: 0 10px 30px rgb(31 30 27 / 0.07), 0 2px 7px rgb(31 30 27 / 0.04);
    --elevation-soft: 0 6px 20px rgb(31 30 27 / 0.05);
    --elevation-panel: var(--surface-sidebar-shell-shadow);

    --text: var(--colour-ink-950);
    --text-sec: var(--colour-ink-800);
    --text-muted: var(--colour-ink-650);
    --text-disabled: var(--colour-ink-450);

    --border: var(--surface-border);
    --border-strong: var(--surface-border-strong);
    --fill-muted: color-mix(in srgb, var(--surface-panel) 82%, var(--text) 3%);
    --fill-subtle: var(--fill-muted);

    /* Premium material accent family. Each option has a readable ink for links
       and focus, an opaque but restrained solid for selected controls and
       primary actions, and an explicit foreground for reliable contrast. The
       family is collected rather than generic: metal, botanical, mineral,
       fruit, and wine references. Large surfaces remain neutral. */
    --accent-pewter-ink: #45484E;
    --accent-pewter-vivid: #62666D;
    --accent-pewter-on: #FFFFFF;
    --accent-aubergine-ink: #54345F;
    --accent-aubergine-vivid: #764B80;
    --accent-aubergine-on: #FFFFFF;
    --accent-lapis-ink: #244B6B;
    --accent-lapis-vivid: #315F88;
    --accent-lapis-on: #FFFFFF;
    --accent-olive-ink: #53602F;
    --accent-olive-vivid: #6E7B43;
    --accent-olive-on: #FFFFFF;
    --accent-mango-ink: #6C5000;
    --accent-mango-vivid: #F3C247;
    --accent-mango-on: #1F1E1B;
    --accent-persimmon-ink: #7A3522;
    --accent-persimmon-vivid: #BC5431;
    --accent-persimmon-on: #FFFFFF;
    --accent-claret-ink: #6E243F;
    --accent-claret-vivid: #943C5A;
    --accent-claret-on: #FFFFFF;

    /* Dark appearance is not a literal inversion of the light pigments. Each
       accent receives an authored night treatment: a deep material fill for
       selected controls, a readable foreground for links and active icons, a
       stone-like boundary, a brighter focus value, and a compact picker swatch.
       Pewter becomes black lacquer in dark appearance, with an ivory swatch ring
       so the near-black material remains deliberate rather than disabled. */
    --accent-pewter-dark-solid: #11110F;
    --accent-pewter-dark-link: #CBC7BD;
    --accent-pewter-dark-border: #77746B;
    --accent-pewter-dark-focus: #DDD8CC;
    --accent-pewter-dark-swatch: #11110F;
    --accent-pewter-dark-swatch-ring: #DDD8CC;
    --accent-pewter-dark-on: #F4F1EA;
    --accent-aubergine-dark-solid: #3B2A3A;
    --accent-aubergine-dark-link: #C79ABE;
    --accent-aubergine-dark-border: #91708D;
    --accent-aubergine-dark-focus: #DEB2D5;
    --accent-aubergine-dark-swatch: #A878A0;
    --accent-aubergine-dark-on: #F4F1EA;
    --accent-lapis-dark-solid: #233644;
    --accent-lapis-dark-link: #8DAFC5;
    --accent-lapis-dark-border: #64859C;
    --accent-lapis-dark-focus: #A9C9DC;
    --accent-lapis-dark-swatch: #6E91AA;
    --accent-lapis-dark-on: #F4F1EA;
    --accent-olive-dark-solid: #303824;
    --accent-olive-dark-link: #A1B375;
    --accent-olive-dark-border: #78885A;
    --accent-olive-dark-focus: #BFD18F;
    --accent-olive-dark-swatch: #859661;
    --accent-olive-dark-on: #F4F1EA;
    --accent-mango-dark-solid: #3D321B;
    --accent-mango-dark-link: #D7B85D;
    --accent-mango-dark-border: #967E42;
    --accent-mango-dark-focus: #F0D17A;
    --accent-mango-dark-swatch: #D2AA4B;
    --accent-mango-dark-on: #F4F1EA;
    --accent-persimmon-dark-solid: #402720;
    --accent-persimmon-dark-link: #D99A80;
    --accent-persimmon-dark-border: #9E6B56;
    --accent-persimmon-dark-focus: #E7A287;
    --accent-persimmon-dark-swatch: #B87358;
    --accent-persimmon-dark-on: #F4F1EA;
    --accent-claret-dark-solid: #3D232D;
    --accent-claret-dark-link: #D99BB0;
    --accent-claret-dark-border: #A0697B;
    --accent-claret-dark-focus: #E4A6B9;
    --accent-claret-dark-swatch: #B36B83;
    --accent-claret-dark-on: #F4F1EA;

    --accent-ink: var(--accent-olive-ink);
    --accent-vivid: var(--accent-olive-vivid);
    --accent-on-vivid: var(--accent-olive-on);
    --accent-dark-solid: var(--accent-olive-dark-solid);
    --accent-dark-link: var(--accent-olive-dark-link);
    --accent-dark-border: var(--accent-olive-dark-border);
    --accent-dark-focus: var(--accent-olive-dark-focus);
    --accent-dark-swatch: var(--accent-olive-dark-swatch);
    --accent-dark-on: var(--accent-olive-dark-on);
    --accent: var(--accent-ink);
    --accent-foreground: var(--accent-ink);
    --accent-solid: var(--accent-vivid);
    --accent-solid-foreground: var(--accent-on-vivid);
    --accent-solid-state-mix: var(--colour-ink-950);
    --accent-solid-hover: color-mix(in srgb, var(--accent-solid) 94%, var(--accent-solid-state-mix) 6%);
    --accent-solid-active: color-mix(in srgb, var(--accent-solid) 88%, var(--accent-solid-state-mix) 12%);
    --accent-solid-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10), 0 1px 1px rgb(31 30 27 / 0.10);
    --accent-soft: color-mix(in srgb, var(--accent-vivid) 6%, var(--surface-panel) 94%);
    --accent-surface: color-mix(in srgb, var(--accent-vivid) 10%, var(--surface-card) 90%);
    --accent-surface-hover: color-mix(in srgb, var(--accent-vivid) 14%, var(--surface-card) 86%);
    --accent-surface-active: color-mix(in srgb, var(--accent-vivid) 18%, var(--surface-card) 82%);
    --accent-border: color-mix(in srgb, var(--accent-vivid) 42%, transparent);
    --accent-border-strong: var(--accent-solid);
    --accent-focus: color-mix(in srgb, var(--accent-ink) 92%, var(--text) 8%);
    --fill-active: var(--accent-surface-active);

    /* Semantic states are stable and do not inherit the personal accent. */
    --status-info: #4E628F;
    --status-success: #506A45;
    --status-warning: #8A5A1E;
    --status-danger: #8D3E4A;
    --danger: var(--status-danger);
    --danger-surface: color-mix(in srgb, var(--danger) 8%, var(--surface-card) 92%);
    --danger-surface-hover: color-mix(in srgb, var(--danger) 13%, var(--surface-card) 87%);
    --danger-border: color-mix(in srgb, var(--danger) 40%, transparent);

    --control-surface: var(--surface-field);
    --control-surface-hover: color-mix(in srgb, var(--surface-field) 78%, var(--surface-panel) 22%);
    --control-surface-active: var(--accent-solid);
    --control-surface-active-hover: var(--accent-solid-hover);
    --control-surface-active-pressed: var(--accent-solid-active);
    --control-active-foreground: var(--accent-solid-foreground);
    --control-border: color-mix(in srgb, var(--text) 18%, transparent);
    --control-border-hover: color-mix(in srgb, var(--text) 29%, transparent);
    --control-border-active: var(--accent-border-strong);

    /* Universal panel interior grammar. */
    --panel-card-bg: var(--surface-sidebar-card);
    --panel-card-border: color-mix(in srgb, var(--text) 10%, transparent);
    --panel-card-border-hover: color-mix(in srgb, var(--text) 18%, transparent);
    --panel-row-bg: color-mix(in srgb, var(--surface-card) 84%, var(--surface-panel) 16%);
    --panel-row-bg-hover: var(--surface-card);
    --panel-row-bg-active: var(--accent-surface);
    --panel-row-border: color-mix(in srgb, var(--text) 8%, transparent);
    --panel-row-border-hover: var(--accent-border);
    --panel-control-surface: var(--surface-field);
    --panel-control-surface-hover: var(--control-surface-hover);
    --panel-control-surface-active: var(--accent-solid);
    --panel-control-border: var(--control-border);
    --panel-control-border-hover: var(--control-border-hover);

    --focus-ring-color: var(--accent-focus);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-radius: var(--shape-technical);
    --focus-ring-shadow: none;
    --surface-focus-scroll-padding: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-cluster));
    --surface-focus-scroll-padding-inline: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-related));

    --scrollbar-track: transparent;
    --scrollbar-thumb: color-mix(in srgb, var(--text) 20%, transparent);

    --bg-app: var(--surface-app-ground);
    --bg-canvas: var(--surface-canvas);
    --bg-chrome: var(--surface-app-ground);
    --bg-card: var(--surface-card);
    --bg-surface: var(--surface-panel);
    --bg-overlay: var(--surface-scrim);

    --doc-canvas: var(--surface-canvas);
    --doc-editor-bg: var(--surface-document-paper);
    --doc-text: var(--text);
    --doc-body-text: #2A2823;
    --doc-heading-text: #181713;
    --document-content-radius: calc(var(--shape-technical) + 4px);
    --doc-highlight-bg: #E8D98D;
    --doc-highlight-text: #211E16;
    --doc-print-bg: #FFFFFF;
    --doc-print-text: #000000;
    --doc-print-border: #CCCCCC;
    --doc-print-muted: #333333;
    --ed-bg: var(--doc-editor-bg);
  }

  /* Current identifiers are explicit hue choices. Legacy identifiers remain
     CSS aliases so first paint is still correct before persisted state is
     normalised by JavaScript. */
  :root[data-accent="grey"] {
    --accent-ink: var(--accent-pewter-ink);
    --accent-vivid: var(--accent-pewter-vivid);
    --accent-on-vivid: var(--accent-pewter-on);
    --accent-dark-solid: var(--accent-pewter-dark-solid);
    --accent-dark-link: var(--accent-pewter-dark-link);
    --accent-dark-border: var(--accent-pewter-dark-border);
    --accent-dark-focus: var(--accent-pewter-dark-focus);
    --accent-dark-swatch: var(--accent-pewter-dark-swatch);
    --accent-dark-on: var(--accent-pewter-dark-on);
  }

  :root[data-accent="purple"],
  :root[data-accent="blue-purple"] {
    --accent-ink: var(--accent-aubergine-ink);
    --accent-vivid: var(--accent-aubergine-vivid);
    --accent-on-vivid: var(--accent-aubergine-on);
    --accent-dark-solid: var(--accent-aubergine-dark-solid);
    --accent-dark-link: var(--accent-aubergine-dark-link);
    --accent-dark-border: var(--accent-aubergine-dark-border);
    --accent-dark-focus: var(--accent-aubergine-dark-focus);
    --accent-dark-swatch: var(--accent-aubergine-dark-swatch);
    --accent-dark-on: var(--accent-aubergine-dark-on);
  }

  :root[data-accent="blue"] {
    --accent-ink: var(--accent-lapis-ink);
    --accent-vivid: var(--accent-lapis-vivid);
    --accent-on-vivid: var(--accent-lapis-on);
    --accent-dark-solid: var(--accent-lapis-dark-solid);
    --accent-dark-link: var(--accent-lapis-dark-link);
    --accent-dark-border: var(--accent-lapis-dark-border);
    --accent-dark-focus: var(--accent-lapis-dark-focus);
    --accent-dark-swatch: var(--accent-lapis-dark-swatch);
    --accent-dark-on: var(--accent-lapis-dark-on);
  }

  :root[data-accent="olive"] {
    --accent-ink: var(--accent-olive-ink);
    --accent-vivid: var(--accent-olive-vivid);
    --accent-on-vivid: var(--accent-olive-on);
    --accent-dark-solid: var(--accent-olive-dark-solid);
    --accent-dark-link: var(--accent-olive-dark-link);
    --accent-dark-border: var(--accent-olive-dark-border);
    --accent-dark-focus: var(--accent-olive-dark-focus);
    --accent-dark-swatch: var(--accent-olive-dark-swatch);
    --accent-dark-on: var(--accent-olive-dark-on);
  }

  :root[data-accent="yellow"] {
    --accent-ink: var(--accent-mango-ink);
    --accent-vivid: var(--accent-mango-vivid);
    --accent-on-vivid: var(--accent-mango-on);
    --accent-dark-solid: var(--accent-mango-dark-solid);
    --accent-dark-link: var(--accent-mango-dark-link);
    --accent-dark-border: var(--accent-mango-dark-border);
    --accent-dark-focus: var(--accent-mango-dark-focus);
    --accent-dark-swatch: var(--accent-mango-dark-swatch);
    --accent-dark-on: var(--accent-mango-dark-on);
    --accent-solid-state-mix: #FFFFFF;
  }

  :root[data-accent="orange"],
  :root[data-accent="yellow-orange"] {
    --accent-ink: var(--accent-persimmon-ink);
    --accent-vivid: var(--accent-persimmon-vivid);
    --accent-on-vivid: var(--accent-persimmon-on);
    --accent-dark-solid: var(--accent-persimmon-dark-solid);
    --accent-dark-link: var(--accent-persimmon-dark-link);
    --accent-dark-border: var(--accent-persimmon-dark-border);
    --accent-dark-focus: var(--accent-persimmon-dark-focus);
    --accent-dark-swatch: var(--accent-persimmon-dark-swatch);
    --accent-dark-on: var(--accent-persimmon-dark-on);
  }

  :root[data-accent="red"],
  :root[data-accent="maroon-red"] {
    --accent-ink: var(--accent-claret-ink);
    --accent-vivid: var(--accent-claret-vivid);
    --accent-on-vivid: var(--accent-claret-on);
    --accent-dark-solid: var(--accent-claret-dark-solid);
    --accent-dark-link: var(--accent-claret-dark-link);
    --accent-dark-border: var(--accent-claret-dark-border);
    --accent-dark-focus: var(--accent-claret-dark-focus);
    --accent-dark-swatch: var(--accent-claret-dark-swatch);
    --accent-dark-on: var(--accent-claret-dark-on);
  }

  @supports (block-size: 100dvh) {
    :root { --app-viewport-block: 100dvh; }
  }

  @supports (block-size: 100svh) {
    :root { --app-small-viewport-block: 100svh; }
  }

  @supports (block-size: 100dvb) {
    :root { --app-keyboard-safe-block: 100dvb; }
  }

  [data-theme="dark"] {
    color-scheme: dark;
    /* Dark appearance mirrors the light hierarchy through a warm ink and
       mineral material system. The page reads like fine dark paper on an ink
       desk, while Olive remains an interaction accent rather than an ambient
       cast. Small channel differences are intentional and governed. */
    --surface-document-paper: var(--colour-night-825);
    --surface-document-paper-dark: var(--colour-night-825);
    --surface-app-ground: var(--colour-night-950);
    --surface-canvas: var(--surface-app-ground);
    --surface-panel: var(--colour-night-900);
    --surface-card: var(--colour-night-850);
    --surface-field: var(--colour-night-750);
    --surface-floating: var(--colour-night-800);
    --surface-floating-chrome: var(--colour-night-900);
    --surface-scrim: rgb(0 0 0 / 0.60);
    --surface-document-boundary: color-mix(in srgb, var(--colour-night-text) 12%, transparent);
    --surface-workspace-divider: color-mix(in srgb, var(--colour-night-text) 14%, transparent);
    --surface-window-separator: color-mix(in srgb, var(--colour-night-text) 24%, transparent);
    --surface-sidebar-shell-border: color-mix(in srgb, var(--colour-night-text) 16%, transparent);
    --surface-sidebar-shell-shadow: 0 20px 48px rgb(0 0 0 / 0.32), 0 3px 10px rgb(0 0 0 / 0.20);
    --surface-inspector-shell-shadow: 0 18px 44px rgb(0 0 0 / 0.34), 0 3px 10px rgb(0 0 0 / 0.22);
    --surface-border: color-mix(in srgb, var(--colour-night-text) 18%, transparent);
    --surface-border-strong: color-mix(in srgb, var(--colour-night-text) 30%, transparent);
    --elevation-control: 0 1px 1px rgb(0 0 0 / 0.20);
    --elevation-floating: 0 12px 34px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.18);
    --elevation-soft: 0 7px 22px rgb(0 0 0 / 0.20);
    --text: var(--colour-night-text);
    --text-sec: var(--colour-night-text-sec);
    --text-muted: var(--colour-night-text-muted);
    --text-disabled: var(--colour-night-text-disabled);
    /* Dark accents are individually authored rather than mathematically lifted
       from the light palette. Links and active icons use the readable colour;
       compact selected controls use a deep tinted material with a clear border;
       focus uses the brightest controlled value. */
    --accent: var(--accent-dark-link);
    --accent-foreground: var(--accent-dark-link);
    --accent-solid: var(--accent-dark-solid);
    --accent-solid-foreground: var(--accent-dark-on);
    --accent-solid-state-mix: var(--accent-dark-border);
    --accent-solid-hover: color-mix(in srgb, var(--accent-solid) 90%, var(--accent-solid-state-mix) 10%);
    --accent-solid-active: color-mix(in srgb, var(--accent-solid) 82%, var(--accent-solid-state-mix) 18%);
    --accent-solid-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-dark-border) 64%, transparent), 0 1px 1px rgb(0 0 0 / 0.28);
    --accent-soft: color-mix(in srgb, var(--accent-dark-link) 7%, var(--surface-panel) 93%);
    --accent-surface: color-mix(in srgb, var(--accent-dark-link) 12%, var(--surface-card) 88%);
    --accent-surface-hover: color-mix(in srgb, var(--accent-dark-link) 16%, var(--surface-card) 84%);
    --accent-surface-active: color-mix(in srgb, var(--accent-dark-link) 20%, var(--surface-card) 80%);
    --accent-border: color-mix(in srgb, var(--accent-dark-border) 62%, transparent);
    --accent-border-strong: var(--accent-dark-border);
    --accent-focus: var(--accent-dark-focus);
    --danger: color-mix(in srgb, var(--status-danger) 62%, white 38%);
    --danger-surface: color-mix(in srgb, var(--status-danger) 16%, var(--surface-card) 84%);
    --danger-surface-hover: color-mix(in srgb, var(--status-danger) 23%, var(--surface-card) 77%);
    --danger-border: color-mix(in srgb, var(--danger) 58%, transparent);
    --control-border: color-mix(in srgb, var(--text) 22%, transparent);
    --control-border-hover: color-mix(in srgb, var(--text) 36%, transparent);
    --panel-card-border: color-mix(in srgb, var(--text) 14%, transparent);
    --panel-card-border-hover: color-mix(in srgb, var(--text) 24%, transparent);
    --panel-row-border: color-mix(in srgb, var(--text) 12%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--text) 30%, transparent);
    --doc-body-text: var(--colour-night-text-sec);
    --doc-heading-text: var(--colour-night-text);
    --doc-highlight-bg: #544A2C;
    --doc-highlight-text: var(--colour-night-text);
  }

  [data-theme="dark"][data-accent="yellow"] {
    --accent-solid-state-mix: var(--accent-dark-border);
  }
}