/* keaiui design tokens — the single source of truth for the visual system.
   Owned by this package; consuming apps import it
   (e.g. import '@tanji-systems/keaiui/tokens.css'). Both the light default
   and the [data-theme="dark"] overrides live here. */
:root,
[data-theme="light"] {
  --color-surface-page: #fdfcfa;
  --color-surface-raised: #f2efea;
  --color-surface-sunken: #e8e4dc;
  /* Modal backdrop. Theme-independent: it darkens whatever surface is below. */
  --color-scrim: rgb(0 0 0 / 35%);
  --color-chrome: #dfdbd2;
  --color-button-face: #e7e3da;
  /* Hover skips one warm-gray ladder step (was warm-gray-200 #dfdbd2, neighbor of face; now warm-gray-300). */
  --color-button-hover: #d3cfc4;
  --color-button-active: #cfcac0;
  --color-border: #d3cfc4;
  --color-border-strong: #8c8780;
  --color-text: #1c1a16;
  --color-text-strong: #141311;
  /* Darkened from #6e6a63 so 9–10px meta/label captions clear WCAG AA 4.5:1
     Darkened again from #615d56 (which only cleared AA, ~4.74–6.4:1, and read as
     washed-out grey) to reach AAA (~7:1+) on the primary surfaces — page 9.1,
     raised 8.2, sunken 7.6, chrome 6.8 — while staying clearly lighter than
     --color-text #1c1a16. See HIG §12 contrast minima. */
  --color-text-muted: #4a463f;
  /* App theme colour — Excel's deep green (was saffron). Picked for a real
     constraint, not mood: the full accent is used as LINK TEXT (.tile_mark_link,
     about-link), so it must clear 4.5:1 on the cream surface. The previous
     #16a34a was only 3.21:1 (failed AA as text); #217346 is 5.68:1 and is the
     literal Excel selection green — calm, low-arousal, domain-appropriate. */
  --color-accent: #217346;
  --color-accent-hover: #1b5f3a;
  --color-accent-active: #154a2d;
  /* Soft accent ("commit") family — a light green wash over the button face,
     not the full forest-green accent. Shared by the primary/commit buttons,
     the popover headers, and the selection arrows. */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, var(--color-button-face));
  --color-accent-soft-hover: color-mix(in srgb, var(--color-accent) 22%, var(--color-button-face));
  --color-accent-soft-active: color-mix(in srgb, var(--color-accent) 30%, var(--color-button-face));
  --color-accent-soft-border: color-mix(in srgb, var(--color-accent) 55%, var(--color-border-strong));
  --color-chrome-accent: var(--color-accent-soft);
  /* Danger hover moves the fill toward the page, away from the error text, so
     every palette keeps its rest contrast or better (mixing the error hue in
     dropped default dark below 4.5:1). Press returns to the rest fill with
     the flat pressed bevel. */
  --color-error-bg-hover: color-mix(in srgb, var(--color-surface-page) 45%, var(--color-error-bg));
  --color-accent-tint: rgba(33, 115, 70, 0.13);
  --color-accent-ink: #fdfcfa;
  --color-success: #2a7a3f;
  --color-success-bg: #e7f6ea;
  --color-warning: #8a5d00;
  --color-warning-bg: #fff3cd;
  --color-error: #8a2d2d;
  --color-error-bg: #f8e2dc;
  --color-info: #526b8c;
  --color-info-bg: #eef3f9;
  /* Search-match overlay — a clear light blue (the info token is a muted slate
     that washes out gray at low opacity). Applied via color-mix in view_dom.css. */
  --color-search-match: #5b9bd5;
  /* Inline-mark ==highlight== fill (see ingrid-editor inline_marks.js). */
  --color-highlight: #f2dd7e;
  /* Action-icon tones — each Tailwind 400 hue muted 60/40 into the warm chrome
     grey, so every tone shares the same chroma + warmth and sits quietly on the
     surface (no neon green). Dark mode raises the hue share for legibility. */
  --tone-add: color-mix(in srgb, #4ade80 60%, var(--color-chrome));
  --tone-remove: color-mix(in srgb, #f87171 60%, var(--color-chrome));
  --tone-move: color-mix(in srgb, #60a5fa 60%, var(--color-chrome));
  --tone-style: color-mix(in srgb, #f59e0b 55%, var(--color-chrome));
  --tone-copy: color-mix(in srgb, #c084fc 60%, var(--color-chrome));
  --tone-neutral: color-mix(in srgb, #94a3b8 60%, var(--color-chrome));
  --tone-clear: color-mix(in srgb, #f472b6 60%, var(--color-chrome));
  /* Identity/account glyph tone — a quiet gold, same color-mix recipe as the
     other tones so the person icon sits in the family, not neon. */
  --tone-user: color-mix(in srgb, #facc15 62%, var(--color-chrome));
  --focus-ring: var(--color-accent);
  --selection-fill: var(--color-accent-tint);
  --tile-selection-color: #7c3aed;
  --tile-selection-fill: color-mix(in srgb, var(--tile-selection-color) 18%, transparent);
  --syntax-keyword: #6b21a8;
  --syntax-string: #036749;
  --syntax-number: #92400e;
  --syntax-variable: #1d4ed8;
  --syntax-type: #b91c1c;
  --syntax-punctuation: #374151;
  color-scheme: light;
  /* The current-tile cursor outline — its only consumer — reads in the green
     theme accent. Tile ranges use independent --tile-selection-color/fill tokens. */
  --selection-border: var(--color-accent);
  --mode-navigate-color: #536878;
  --mode-edit-color: #79568f;
  --mode-navigate-face: color-mix(in srgb, var(--mode-navigate-color) 18%, var(--color-button-face));
  --mode-edit-face: color-mix(in srgb, var(--mode-edit-color) 23%, var(--color-button-face));
  --mode-navigate-border: color-mix(in srgb, var(--mode-navigate-color) 70%, var(--color-text-strong));
  --mode-edit-border: color-mix(in srgb, var(--mode-edit-color) 70%, var(--color-text-strong));

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;

  /* Scrollbar end-button arrow glyphs. Triangle fill = --color-text-muted baked
     into the SVG (background-image data URIs can't read CSS variables). Dark
     theme overrides below swap the hex. */
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%234a463f'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%234a463f'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%234a463f'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%234a463f'/></svg>");

  --bevel-raised: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.18);
  --bevel-raised-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 1px rgba(0, 0, 0, 0.18);
  --bevel-raised-primary: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 1px rgba(0, 0, 0, 0.22);
  --bevel-raised-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 1px rgba(0, 0, 0, 0.22);
  --bevel-sunken: inset 1px 1px 0 rgba(0, 0, 0, 0.12), inset -1px -1px 0 rgba(255, 255, 255, 0.70);
  --bevel-active: inset 1px 1px 0 rgba(0, 0, 0, 0.18), inset -1px -1px 0 rgba(255, 255, 255, 0.40);
  --bevel-pressed: none;
  --bevel-window: 0 2px 3px rgba(15, 23, 32, 0.24), 0 7px 16px rgba(15, 23, 32, 0.18);
  --bevel-popover: 0 3px 8px rgba(15, 23, 32, 0.1);
  --bevel-inset-rule: inset 0 -1px 0 var(--color-border);

  --motion-fast: 80ms cubic-bezier(0, 0, 0.2, 1);
  --motion-popover: 120ms cubic-bezier(0, 0, 0.2, 1);
  --motion-shortcut-overlay: 180ms cubic-bezier(0, 0, 0.2, 1);
  --motion-none: 0ms linear;
}

/* Keep geometry and type roles together so a scoped size can re-evaluate
   inherited font shorthands as well as individual dimensions. */
:root,
[data-theme="light"],
[data-ui-size] {
  --ui-scale: 1;
  --space-1: calc(2px * var(--ui-scale));
  --space-2: calc(4px * var(--ui-scale));
  --space-3: calc(6px * var(--ui-scale));
  --space-4: calc(8px * var(--ui-scale));
  --space-5: calc(12px * var(--ui-scale));
  --space-6: calc(16px * var(--ui-scale));
  --space-7: calc(24px * var(--ui-scale));
  --space-8: calc(32px * var(--ui-scale));

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Bare font sizes — the size half of the type roles below, exposed so widgets
     that need only a size (not the full role shorthand) consume a token instead
     of hardcoding px. These roles scale with the scoped interface preference. See HIG §3.3. */
  --text-size-meta: calc(9px * var(--ui-scale));
  --text-size-label: calc(10px * var(--ui-scale));
  --text-size-ui: calc(11px * var(--ui-scale));
  --text-size-body: calc(12px * var(--ui-scale));
  --text-size-title: calc(12px * var(--ui-scale));
  --text-size-display: calc(16px * var(--ui-scale));

  --text-meta-font: 700 var(--text-size-meta) / 1.1 var(--font-sans);
  --text-meta-spacing: 0.06em;
  --text-meta-transform: uppercase;
  --text-label-font: 400 var(--text-size-label) / 1.2 var(--font-sans);
  --text-label-spacing: 0.04em;
  --text-ui-font: 400 var(--text-size-ui) / 1.3 var(--font-sans);
  --text-body-font: 400 var(--text-size-body) / 1.4 var(--font-sans);
  --text-title-font: 600 var(--text-size-title) / 1 var(--font-serif);
  --text-title-spacing: 0.06em;
  --text-title-variant: small-caps;
  --text-display-font: 600 var(--text-size-display) / 1.2 var(--font-sans);

  /* Public reading surfaces retain their independent 115% type scale without
     scaling page geometry or changing application/document type roles. */
  --web-type-scale: 1.15;
  --text-size-web-meta: calc(10px * var(--web-type-scale));
  --text-size-web-label: calc(11px * var(--web-type-scale));
  --text-size-web-ui: calc(12px * var(--web-type-scale));
  --text-size-web-body: calc(13px * var(--web-type-scale));
  --text-size-web-subheading: calc(16px * var(--web-type-scale));
  --text-size-web-lead: calc(17px * var(--web-type-scale));
  --text-size-web-heading: calc(19px * var(--web-type-scale));
  --text-size-web-display: calc(32px * var(--web-type-scale));

  /* Chrome heights. Dual-ladder with the spacing tokens: buttons, inputs,
     and strips stack in a different rhythm than padding and gap and never
     derive from the spacing scale. HIG §3.7. Control dimensions scale together with type and spacing. */
  --size-ctrl-xs: calc(12px * var(--ui-scale));    /* tool button (close/pin/collapse) */
  --size-ctrl-sm: calc(20px * var(--ui-scale));    /* compact ActionButton / TextButton */
  --size-ctrl-md: calc(24px * var(--ui-scale));    /* default ActionButton / TextButton */
  --size-ctrl-lg: calc(28px * var(--ui-scale));    /* large TextButton / input-large */
  --size-ctrl-xl: calc(32px * var(--ui-scale));    /* hero ActionButton; footer strip */
  /* House mobile minimum tap target. Consumers apply it unprefixed
     (mobile) and fall back to the desktop --size-ctrl-* rung at Tailwind's
     `sm:` breakpoint — CSS-responsive, no JS width sniffing. Jiji is the
     first mobile-first consumer; desktop-only apps (ingrid) never see this
     rung since they stay above `sm:`. */
  --size-touch: calc(44px * var(--ui-scale));
  --size-pill: calc(22px * var(--ui-scale));       /* flush header pill; default TextInput */
  --size-strip-toolbar: calc(30px * var(--ui-scale));
  --size-strip-footer: calc(32px * var(--ui-scale));
  --size-scrollbar: calc(14px * var(--ui-scale));

  /* Icon-sampling ladder. Two steps only — HIG §3.7 locks 14×14 for all
     non-tool buttons; tool buttons use 8×8. Padding absorbs size deltas. */
  --icon-xs: calc(8px * var(--ui-scale));
  --icon-md: calc(14px * var(--ui-scale));
}

/* Opt-in interface size. An inner data-ui-size="100" resets the geometry
   and type roles together (for document content, for example). */
[data-ui-size="110"] {
  --ui-scale: 1.1;
}
[data-ui-size="115"] {
  --ui-scale: 1.15;
}
[data-ui-size="125"] {
  --ui-scale: 1.25;
}
[data-ui-size="126.5"] {
  --ui-scale: 1.265;
}

[data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  color-scheme: dark;
  --tile-selection-color: #c4a4f7;
  --syntax-keyword: #d797e8;
  --syntax-string: #98c379;
  --syntax-number: #d19a66;
  --syntax-variable: #61afef;
  --syntax-type: #ef8b93;
  --syntax-punctuation: #abb2bf;
  --color-surface-page: #1c1a16;
  --color-surface-raised: #24211c;
  --color-surface-sunken: #141311;
  --color-chrome: #2a2620;
  --color-button-face: #302a23;
  /* Hover skips one warm-gray ladder step brighter (was warm-gray-750 #3a342c, neighbor of face; now interpolated between 750 and 700). */
  --color-button-hover: #423d33;
  --color-button-active: #4a4439;
  --color-border: #453f35;
  /* Clears 3:1 against both the page and raised field surrounds. */
  --color-border-strong: #706c65;
  --color-text: #e7e3da;
  --color-text-strong: #f2efea;
  /* Lightened again from #969089 (which failed AA at 4.49:1 on dark button-face
     #302a23 and read washed-out) to reach AAA (~7:1+) across surfaces — page 8.3,
     raised 7.6, sunken 8, chrome 7.2, button-face 7 — still clearly darker than
     --color-text #e7e3da. Mirrors the light-mode fix. HIG §12. */
  --color-text-muted: #b8b2aa;
  /* Green theme — brighter on the dark surface; dark accent-ink reads on it. */
  --color-accent: #22c55e;
  /* Dark ramps lighten on interaction, like every other dark palette; darker
     steps dropped link text from 7.6:1 to 3.5:1 on press. */
  --color-accent-hover: #4ade80;
  --color-accent-active: #86efac;
  --color-accent-tint: rgba(34, 197, 94, 0.18);
  --color-accent-ink: #141311;
  --color-success: #5cbb78;
  --color-success-bg: #1e3a22;
  --color-warning: #e3a814;
  --color-warning-bg: #3a2f0d;
  --color-error: #e07a7a;
  --color-error-bg: #3a1a1a;
  --color-info: #8ca7cc;
  --color-info-bg: #1d2838;
  --color-search-match: #6fb0ea;
  --color-highlight: #6b5a23;
  /* Keep icon hues recognizable on dark chrome: 80/20 instead of light
     mode's 60/40. Amber and account gold retain their relative offsets. */
  --tone-add: color-mix(in srgb, #4ade80 80%, var(--color-chrome));
  --tone-remove: color-mix(in srgb, #f87171 80%, var(--color-chrome));
  --tone-move: color-mix(in srgb, #60a5fa 80%, var(--color-chrome));
  --tone-style: color-mix(in srgb, #f59e0b 75%, var(--color-chrome));
  --tone-copy: color-mix(in srgb, #c084fc 80%, var(--color-chrome));
  --tone-neutral: color-mix(in srgb, #94a3b8 80%, var(--color-chrome));
  --tone-clear: color-mix(in srgb, #f472b6 80%, var(--color-chrome));
  --tone-user: color-mix(in srgb, #facc15 82%, var(--color-chrome));
  --bevel-raised: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(0, 0, 0, 0.45);
  --bevel-raised-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 1px rgba(0, 0, 0, 0.45);
  --bevel-raised-primary: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 1px rgba(0, 0, 0, 0.50);
  --bevel-raised-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.50);
  --bevel-sunken: inset 1px 1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.06);
  --bevel-active: inset 1px 1px 0 rgba(0, 0, 0, 0.60), inset -1px -1px 0 rgba(255, 255, 255, 0.08);
  --bevel-window: 0 2px 3px rgba(0, 0, 0, 0.65), 0 7px 16px rgba(0, 0, 0, 0.50);
  --bevel-popover: 0 3px 8px rgba(0, 0, 0, 0.35);
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23b8b2aa'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23b8b2aa'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23b8b2aa'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23b8b2aa'/></svg>");
}

/* Motion preference belongs to the token owner, so every consumer receives it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: var(--motion-none);
    --motion-popover: var(--motion-none);
    --motion-shortcut-overlay: var(--motion-none);
  }
}

/* Opt-in paired palettes, adapted for KeaiUI semantic contrast.
   Values and notices: packages/keaiui/THEME-NOTICES.txt. No geometry overrides. */
[data-palette="gruvbox"][data-theme="light"] {
  --color-surface-page: #fbf1c7;
  --color-surface-raised: #f2e5bc;
  --color-surface-sunken: #ebdbb2;
  --color-chrome: #ebdbb2;
  --color-button-face: #eee1b9;
  --color-button-hover: #e0d4af;
  --color-button-active: #daceaa;
  --color-border: #c0b698;
  --color-border-strong: #554c45;
  --color-text: #282828;
  --color-text-strong: #282828;
  --color-text-muted: #554c45;
  --color-accent: #5d590b;
  --color-accent-hover: #58540e;
  --color-accent-active: #535010;
  --color-accent-ink: #ffffff;
  --color-accent-tint: color-mix(in srgb, #5d590b 12%, transparent);
  --color-highlight: #e5ca8e;
  --color-search-match: #986311;
  --tile-selection-color: #075f70;
  --tile-selection-fill: color-mix(in srgb, #075f70 18%, transparent);
  --color-success: #335f44;
  --color-success-bg: #e8e5bc;
  --color-warning: #764d0d;
  --color-warning-bg: #f4e5b5;
  --color-error: #9d0006;
  --color-error-bg: #f2d9b4;
  --color-info: #065e6e;
  --color-info-bg: #e3e3bf;
  --syntax-keyword: #78355f;
  --syntax-string: #2e553d;
  --syntax-number: #69440c;
  --syntax-variable: #065564;
  --syntax-type: #9d0006;
  --syntax-punctuation: #544b44;
  --tone-add: #608c68;
  --tone-remove: #ab2725;
  --tone-move: #307b82;
  --tone-style: #bf8830;
  --tone-copy: #a05b7d;
  --tone-neutral: #706659;
  --tone-clear: #ab2725;
  --tone-user: #bf8830;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23554c45'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23554c45'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23554c45'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23554c45'/></svg>");
}

[data-palette="gruvbox"][data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  --color-surface-page: #282828;
  --color-surface-raised: #32302f;
  --color-surface-sunken: #1d2021;
  --color-chrome: #3c3836;
  --color-button-face: #3c3836;
  --color-button-hover: #494540;
  --color-button-active: #4f4a44;
  --color-border: #686357;
  --color-border-strong: #d4cab8;
  --color-text: #fdf8e1;
  --color-text-strong: #fdf8e1;
  --color-text-muted: #d4cab8;
  --color-accent: #c0c23e;
  --color-accent-hover: #c6c74e;
  --color-accent-active: #cbcc5b;
  --color-accent-ink: #000000;
  --color-accent-tint: color-mix(in srgb, #c0c23e 12%, transparent);
  --color-highlight: #6b582a;
  --color-search-match: #fabd2f;
  --tile-selection-color: #abc2b9;
  --tile-selection-fill: color-mix(in srgb, #abc2b9 18%, transparent);
  --color-success: #9ec98e;
  --color-success-bg: #323730;
  --color-warning: #fabd2f;
  --color-warning-bg: #3d3729;
  --color-error: #fda89e;
  --color-error-bg: #3d2b29;
  --color-info: #abc2b9;
  --color-info-bg: #313433;
  --syntax-keyword: #e9c2cd;
  --syntax-string: #b4d5a9;
  --syntax-number: #fac444;
  --syntax-variable: #bfd0c9;
  --syntax-type: #febcb4;
  --syntax-punctuation: #d4cbb9;
  --tone-add: #7fa86f;
  --tone-remove: #d94634;
  --tone-move: #769186;
  --tone-style: #d8a530;
  --tone-copy: #b87889;
  --tone-neutral: #b9b0a1;
  --tone-clear: #d94634;
  --tone-user: #d8a530;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23d4cab8'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23d4cab8'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23d4cab8'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23d4cab8'/></svg>");
}

[data-palette="solarized"][data-theme="light"] {
  --color-surface-page: #fdf6e3;
  --color-surface-raised: #eee8d5;
  --color-surface-sunken: #e5dfcc;
  --color-chrome: #e5dfcc;
  --color-button-face: #eee8d5;
  --color-button-hover: #dedccb;
  --color-button-active: #d7d6c6;
  --color-border: #b9bfb3;
  --color-border-strong: #435358;
  --color-text: #073642;
  --color-text-strong: #073642;
  --color-text-muted: #435358;
  --color-accent: #1a6560;
  --color-accent-hover: #18605d;
  --color-accent-active: #175d5b;
  --color-accent-ink: #ffffff;
  --color-accent-tint: color-mix(in srgb, #1a6560 12%, transparent);
  --color-highlight: #e6d39a;
  --color-search-match: #916e00;
  --tile-selection-color: #1a5f8f;
  --tile-selection-fill: color-mix(in srgb, #1a5f8f 18%, transparent);
  --color-success: #546000;
  --color-success-bg: #f1edcc;
  --color-warning: #725600;
  --color-warning-bg: #f6ebcc;
  --color-error: #ac2725;
  --color-error-bg: #fae2d1;
  --color-info: #1a5f8f;
  --color-info-bg: #e8ebe1;
  --syntax-keyword: #474b81;
  --syntax-string: #495400;
  --syntax-number: #644b00;
  --syntax-variable: #17537e;
  --syntax-type: #982220;
  --syntax-punctuation: #425257;
  --tone-add: #96a625;
  --tone-remove: #de514b;
  --tone-move: #489ad1;
  --tone-style: #be9825;
  --tone-copy: #8285c5;
  --tone-neutral: #606c6d;
  --tone-clear: #de514b;
  --tone-user: #be9825;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23435358'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23435358'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23435358'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23435358'/></svg>");
}

[data-palette="solarized"][data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  --color-surface-page: #002b36;
  --color-surface-raised: #073642;
  --color-surface-sunken: #00232c;
  --color-chrome: #0b3943;
  --color-button-face: #0b3943;
  --color-button-hover: #1c464e;
  --color-button-active: #234c53;
  --color-border: #436468;
  --color-border-strong: #c1c9c9;
  --color-text: #fdf6e3;
  --color-text-strong: #fdf6e3;
  --color-text-muted: #c1c9c9;
  --color-accent: #77c3bd;
  --color-accent-hover: #84c8c1;
  --color-accent-active: #8fccc4;
  --color-accent-ink: #000000;
  --color-accent-tint: color-mix(in srgb, #77c3bd 12%, transparent);
  --color-highlight: #3a4925;
  --color-search-match: #ba9112;
  --tile-selection-color: #83bde5;
  --tile-selection-fill: color-mix(in srgb, #83bde5 18%, transparent);
  --color-success: #b1be5c;
  --color-success-bg: #0d3631;
  --color-warning: #d0b55e;
  --color-warning-bg: #123431;
  --color-error: #efa3a1;
  --color-error-bg: #162c35;
  --color-info: #83bde5;
  --color-info-bg: #043546;
  --syntax-keyword: #c4c6e7;
  --syntax-string: #c6cf87;
  --syntax-number: #dcc887;
  --syntax-variable: #a4ceec;
  --syntax-type: #f3bbba;
  --syntax-punctuation: #c2caca;
  --tone-add: #6f880c;
  --tone-remove: #b63333;
  --tone-move: #217cb8;
  --tone-style: #967b0c;
  --tone-copy: #5b67ad;
  --tone-neutral: #a0afb1;
  --tone-clear: #b63333;
  --tone-user: #967b0c;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23c1c9c9'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23c1c9c9'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23c1c9c9'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23c1c9c9'/></svg>");
}

[data-palette="catppuccin"][data-theme="light"] {
  --color-surface-page: #eff1f5;
  --color-surface-raised: #e6e9ef;
  --color-surface-sunken: #dce0e8;
  --color-chrome: #dce0e8;
  --color-button-face: #e6e9ef;
  --color-button-hover: #dbdee6;
  --color-button-active: #d7dae2;
  --color-border: #c3c6d0;
  --color-border-strong: #4b4c5b;
  --color-text: #2f3141;
  --color-text-strong: #2f3141;
  --color-text-muted: #4b4c5b;
  --color-accent: #7933d5;
  --color-accent-hover: #7233c6;
  --color-accent-active: #6c33ba;
  --color-accent-ink: #ffffff;
  --color-accent-tint: color-mix(in srgb, #7933d5 12%, transparent);
  --color-highlight: #ead1b0;
  --color-search-match: #a56915;
  --tile-selection-color: #1956ce;
  --tile-selection-fill: color-mix(in srgb, #1956ce 18%, transparent);
  --color-success: #2b6b1d;
  --color-success-bg: #dee9e1;
  --color-warning: #815211;
  --color-warning-bg: #ede7df;
  --color-error: #bb0d33;
  --color-error-bg: #ecdae2;
  --color-info: #1955cb;
  --color-info-bg: #dae3f5;
  --syntax-keyword: #632aae;
  --syntax-string: #235617;
  --syntax-number: #6b440e;
  --syntax-variable: #1445a7;
  --syntax-type: #990b2a;
  --syntax-punctuation: #4a4b5a;
  --tone-add: #5cac4d;
  --tone-remove: #d43558;
  --tone-move: #407cf3;
  --tone-style: #de9d42;
  --tone-copy: #9757ee;
  --tone-neutral: #656774;
  --tone-clear: #d43558;
  --tone-user: #de9d42;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%234b4c5b'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%234b4c5b'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%234b4c5b'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%234b4c5b'/></svg>");
}

[data-palette="catppuccin"][data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  --color-surface-page: #1e1e2e;
  --color-surface-raised: #242436;
  --color-surface-sunken: #181825;
  --color-chrome: #29293d;
  --color-button-face: #29293d;
  --color-button-hover: #34354a;
  --color-button-active: #393a4f;
  --color-border: #4f5167;
  --color-border-strong: #babfd4;
  --color-text: #e6ebfa;
  --color-text-strong: #e6ebfa;
  --color-text-muted: #babfd4;
  --color-accent: #cba6f7;
  --color-accent-hover: #ceadf7;
  --color-accent-active: #d0b2f8;
  --color-accent-ink: #000000;
  --color-accent-tint: color-mix(in srgb, #cba6f7 12%, transparent);
  --color-highlight: #645d57;
  --color-search-match: #f9e2af;
  --tile-selection-color: #89b4fa;
  --tile-selection-fill: color-mix(in srgb, #89b4fa 18%, transparent);
  --color-success: #a6e3a1;
  --color-success-bg: #2c323a;
  --color-warning: #f9e2af;
  --color-warning-bg: #34323b;
  --color-error: #f38ba8;
  --color-error-bg: #33293a;
  --color-info: #89b4fa;
  --color-info-bg: #292d42;
  --syntax-keyword: #d3b4f8;
  --syntax-string: #a6e3a1;
  --syntax-number: #f9e2af;
  --syntax-variable: #a1c3fb;
  --syntax-type: #f6adc1;
  --syntax-punctuation: #bbc0d4;
  --tone-add: #90c28f;
  --tone-remove: #cf7995;
  --tone-move: #789bd8;
  --tone-style: #d4c19a;
  --tone-copy: #ae90d6;
  --tone-neutral: #a0a4b9;
  --tone-clear: #cf7995;
  --tone-user: #d4c19a;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23babfd4'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23babfd4'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23babfd4'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23babfd4'/></svg>");
}

[data-palette="tokyo-night"][data-theme="light"] {
  --color-surface-page: #e1e2e7;
  --color-surface-raised: #d7dbe6;
  --color-surface-sunken: #d0d5e3;
  --color-chrome: #d0d5e3;
  --color-button-face: #d7dbe6;
  --color-button-hover: #cacfdc;
  --color-button-active: #c5cad8;
  --color-border: #aeb5c6;
  --color-border-strong: #3a4469;
  --color-text: #1b2845;
  --color-text-strong: #1b2845;
  --color-text-muted: #3a4469;
  --color-accent: #1e529a;
  --color-accent-hover: #1e4e92;
  --color-accent-active: #1d4a8b;
  --color-accent-ink: #ffffff;
  --color-accent-tint: color-mix(in srgb, #1e529a 12%, transparent);
  --color-highlight: #c6bcb1;
  --color-search-match: #85673b;
  --tile-selection-color: #693aa6;
  --tile-selection-fill: color-mix(in srgb, #693aa6 18%, transparent);
  --color-success: #445a2c;
  --color-success-bg: #d3d7d6;
  --color-warning: #664f2d;
  --color-warning-bg: #d8d6d6;
  --color-error: #9f1b42;
  --color-error-bg: #e3d0da;
  --color-info: #1e529a;
  --color-info-bg: #cfd8e7;
  --syntax-keyword: #573089;
  --syntax-string: #374a24;
  --syntax-number: #544125;
  --syntax-variable: #19447e;
  --syntax-type: #841737;
  --syntax-punctuation: #394368;
  --tone-add: #6e8658;
  --tone-remove: #ee497c;
  --tone-move: #4b8de8;
  --tone-style: #987f5c;
  --tone-copy: #a26bee;
  --tone-neutral: #555e7f;
  --tone-clear: #ee497c;
  --tone-user: #987f5c;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%233a4469'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%233a4469'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%233a4469'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%233a4469'/></svg>");
}

[data-palette="tokyo-night"][data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  --color-surface-page: #1a1b26;
  --color-surface-raised: #202232;
  --color-surface-sunken: #16161e;
  --color-chrome: #242737;
  --color-button-face: #242737;
  --color-button-hover: #2f3244;
  --color-button-active: #34374a;
  --color-border: #484c63;
  --color-border-strong: #abb3d7;
  --color-text: #d6ddf8;
  --color-text-strong: #d6ddf8;
  --color-text-muted: #abb3d7;
  --color-accent: #7aa2f7;
  --color-accent-hover: #83a8f7;
  --color-accent-active: #8badf7;
  --color-accent-ink: #000000;
  --color-accent-tint: color-mix(in srgb, #7aa2f7 12%, transparent);
  --color-highlight: #594a3b;
  --color-search-match: #e0af68;
  --tile-selection-color: #bb9af7;
  --tile-selection-fill: color-mix(in srgb, #bb9af7 18%, transparent);
  --color-success: #9ece6a;
  --color-success-bg: #272d2d;
  --color-warning: #e0af68;
  --color-warning-bg: #2e2a2d;
  --color-error: #f77e95;
  --color-error-bg: #302430;
  --color-info: #7aa2f7;
  --color-info-bg: #24283b;
  --syntax-keyword: #c5a8f8;
  --syntax-string: #9ece6a;
  --syntax-number: #e0af68;
  --syntax-variable: #95b5f9;
  --syntax-type: #f99aab;
  --syntax-punctuation: #acb4d7;
  --tone-add: #88b061;
  --tone-remove: #d1687e;
  --tone-move: #6b8cd4;
  --tone-style: #be975f;
  --tone-copy: #a085d4;
  --tone-neutral: #939aba;
  --tone-clear: #d1687e;
  --tone-user: #be975f;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23abb3d7'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23abb3d7'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23abb3d7'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23abb3d7'/></svg>");
}

[data-palette="rose-pine"][data-theme="light"] {
  --color-surface-page: #faf4ed;
  --color-surface-raised: #fffaf3;
  --color-surface-sunken: #f2e9e1;
  --color-chrome: #f2e9e1;
  --color-button-face: #f7eee7;
  --color-button-hover: #ece3df;
  --color-button-active: #e7dedc;
  --color-border: #d2cace;
  --color-border-strong: #514f63;
  --color-text: #37344c;
  --color-text-strong: #37344c;
  --color-text-muted: #514f63;
  --color-accent: #8e4e60;
  --color-accent-hover: #854b5e;
  --color-accent-active: #7e495c;
  --color-accent-ink: #ffffff;
  --color-accent-tint: color-mix(in srgb, #8e4e60 12%, transparent);
  --color-highlight: #f5d8b2;
  --color-search-match: #a66f25;
  --tile-selection-color: #3c686f;
  --tile-selection-fill: color-mix(in srgb, #3c686f 18%, transparent);
  --color-success: #286882;
  --color-success-bg: #e5e6e2;
  --color-warning: #83581d;
  --color-warning-bg: #f8ebda;
  --color-error: #8e4e60;
  --color-error-bg: #f3e6e2;
  --color-info: #3c686f;
  --color-info-bg: #eaeae5;
  --syntax-keyword: #584a67;
  --syntax-string: #21576d;
  --syntax-number: #6e4a18;
  --syntax-variable: #32565c;
  --syntax-type: #75404f;
  --syntax-punctuation: #514f63;
  --tone-add: #4c8094;
  --tone-remove: #bf7b8d;
  --tone-move: #72a3ab;
  --tone-style: #ebab53;
  --tone-copy: #a28eb3;
  --tone-neutral: #6e6b7a;
  --tone-clear: #bf7b8d;
  --tone-user: #ebab53;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23514f63'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23514f63'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23514f63'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23514f63'/></svg>");
}

[data-palette="rose-pine"][data-theme="dark"] {
  --mode-navigate-color: #9fabb7;
  --mode-edit-color: #b59acb;
  --color-surface-page: #191724;
  --color-surface-raised: #1f1d2e;
  --color-surface-sunken: #14121e;
  --color-chrome: #26233a;
  --color-button-face: #26233a;
  --color-button-hover: #333047;
  --color-button-active: #39364d;
  --color-border: #514e65;
  --color-border-strong: #c0becf;
  --color-text: #eae9f8;
  --color-text-strong: #eae9f8;
  --color-text-muted: #c0becf;
  --color-accent: #ebbcba;
  --color-accent-hover: #ebc1c0;
  --color-accent-active: #ebc4c5;
  --color-accent-ink: #000000;
  --color-accent-tint: color-mix(in srgb, #ebbcba 12%, transparent);
  --color-highlight: #604d3f;
  --color-search-match: #f6c177;
  --tile-selection-color: #9ccfd8;
  --tile-selection-fill: color-mix(in srgb, #9ccfd8 18%, transparent);
  --color-success: #9ccfd8;
  --color-success-bg: #262936;
  --color-warning: #f6c177;
  --color-warning-bg: #2f282c;
  --color-error: #ee85a2;
  --color-error-bg: #2e202f;
  --color-info: #9ccfd8;
  --color-info-bg: #262936;
  --syntax-keyword: #cfb7eb;
  --syntax-string: #9ccfd8;
  --syntax-number: #f6c177;
  --syntax-variable: #9ccfd8;
  --syntax-type: #f4adc1;
  --syntax-punctuation: #c1bfcf;
  --tone-add: #87b0bc;
  --tone-remove: #c86182;
  --tone-move: #87b0bc;
  --tone-style: #d1a56c;
  --tone-copy: #a88fc8;
  --tone-neutral: #a4a2b4;
  --tone-clear: #c86182;
  --tone-user: #d1a56c;
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 9L7 5L10 9Z' fill='%23c0becf'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 5L10 5L7 9Z' fill='%23c0becf'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9 4L5 7L9 10Z' fill='%23c0becf'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 4L9 7L5 10Z' fill='%23c0becf'/></svg>");
}

/* PRCU identity: red P and red action/focus roles, on the shared paper/ink
   surfaces. Product binding, not an additional Ingrid settings preset. */
[data-palette="prcu"]:not([data-theme="dark"]),
[data-palette="prcu"][data-theme="light"] {
  --color-accent: #b02e27;
  --color-accent-hover: #982922;
  --color-accent-active: #7d211c;
  --color-accent-tint: rgba(176, 46, 39, 0.13);
  --color-accent-ink: #fdfcfa;
}
[data-palette="prcu"][data-theme="dark"] {
  --color-accent: #ee8c80;
  --color-accent-hover: #f4a297;
  --color-accent-active: #f8b5ab;
  --color-accent-tint: rgba(238, 140, 128, 0.18);
  --color-accent-ink: #141311;
}