/*
  Estiva's design tokens — the VALUES behind the names in tailwind-preset.js,
  one block per theme. Import once, before anything that uses them:

    @import '@estiva-app/ui/tokens.css';

  Select a theme with `data-theme="<name>"` on <html>. `dark` and `signal`
  also answer to the `.dark` / `.signal` classes, which is how Peek selects
  them (`.dark.signal` — Signal layers over dark) and what its `dark:`
  variants key on. No attribute at all is `light`.

  Which theme is whose: Peek renders `signal`; Ship renders `ship`; `light`
  and `dark` are the bases Peek's Storybook and Estiva ID's screens use.

  Every block defines every token (tokens.test.ts checks). A theme that left
  one out would inherit it from `:root` and silently show light values.

  Peek's Signal-only extras (highlight, washes, glows, private, logo, mono)
  are product, not the contract, and stay in Peek's own `.signal` block.
*/

/* ─── light ─── Peek's base theme (peek/src/index.css :root, 2026-08-28). */
:root {
  /* bg */
  --bg-base:     #F4F4F5;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FAFAFA;
  --bg-inset:    #F4F4F5;
  --bg-hover:    #E9E9EB;
  --bg-selected: #E4E4E7;
  --bg-active:   #D4D4D8;
  --bg-nav-active: #D4D4D8; /* the current row in a sidebar */
  --bg-disabled: #F4F4F5;

  /* text */
  --text-primary:   #18181B;
  --text-secondary: #52525B;
  --text-muted:     #A1A1AA;
  --text-disabled:  #D4D4D8;
  --text-inverse:   #FAFAFA;

  /* border */
  --border-subtle:  #F4F4F5;
  --border-default: #E4E4E7;
  --border-strong:  #D4D4D8;
  --border-focus:   #8B5CF6;

  /* accent */
  --accent-primary: #8B5CF6;
  --accent-hover:   #7C3AED;
  --accent-muted:   #EDE9FE;
  /* The accent as TEXT: a tag's words, a mention. The accent itself unless a
     theme's accent is too dark to read as text on its own ground (ship). */
  --accent-text:    #8B5CF6;
  --text-interactive: #8B5CF6;

  /* semantic */
  --info-default:    #3B82F6;
  --info-muted:      #DBEAFE;
  --warning-default: #F59E0B;
  --warning-muted:   #FEF3C7;
  --success-default: #0EA06F;
  --success-muted:   #D1FAE5;
  --error-default:   #EF4444;
  --error-muted:     #FEE2E2;

  /* shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.16);
  /* Transparent colours (D16): designed per theme, never an opacity modifier. */
  --bg-wash:         rgba(0, 0, 0, 0.04);
  --accent-outline:  rgba(139, 92, 246, 0.3);
  --info-outline:    rgba(59, 130, 246, 0.3);
  --warning-outline: rgba(245, 158, 11, 0.3);
  --success-outline: rgba(14, 160, 111, 0.3);
  --error-outline:   rgba(239, 68, 68, 0.3);
  --accent-wash:     rgba(139, 92, 246, 0.11);
  --success-wash:    rgba(14, 160, 111, 0.11);
  --glow-warning:    0 0 5px rgba(245, 158, 11, 0.4);
  --glow-success:    0 0 5px rgba(14, 160, 111, 0.7);
  --glow-accent:     0 0 5px rgba(139, 92, 246, 0.6);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-strong:    rgba(0, 0, 0, 0.8);
  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
     always had: the elevated surface, primary text, the default border. */
  --bg-tooltip:     #FAFAFA;
  --text-tooltip:   #18181B;
  --border-tooltip: #E4E4E7;
  /* A shortcut key on a tooltip: what Kbd always drew here. */
  --bg-tooltip-key:     #F4F4F5;
  --border-tooltip-key: #D4D4D8;
  --text-tooltip-key:   #52525B;
  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
     the inset ground, the default line, no shadow. */
  --bg-field:     #F4F4F5;
  --border-field: #E4E4E7;
  --shadow-field: 0 0 #0000;
  /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
     Here, the hover fill: bg-active, #D4D4D8, was the darkest thing on a white card (Katerina, 28 September). */
  --bg-code:     #E9E9EB;
  /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
  --syntax-keyword: #c21f2b;
  --syntax-function: #6639ba;
  --syntax-constant: #0550ae;
  --syntax-string: #0a3069;
  --syntax-variable: #953800;
  --syntax-comment: #59636e;
  --syntax-tag: #116329;
}

/* ─── dark ─── Peek's dark theme (peek/src/index.css .dark, 2026-08-28). */
.dark,
:root[data-theme='dark'] {
  /* bg */
  --bg-base:     #09090B;
  --bg-surface:  #141416;
  --bg-elevated: #1C1C1F;
  --bg-inset:    #27272A;
  --bg-hover:    #232326;
  --bg-selected: #1F1F22;
  --bg-active:   #2D2D31;
  --bg-nav-active: #2D2D31; /* the current row in a sidebar */
  --bg-disabled: #1C1C1F;

  /* text */
  --text-primary:   #FAFAFA;
  --text-secondary: #AEAEB6; /* nudged up from #A1A1AA (2026-07-23) — brighter bodies, still clearly below primary */
  --text-muted:     #71717A;
  --text-disabled:  #52525B;
  --text-inverse:   #18181B;

  /* border */
  --border-subtle:  #1F1F22;
  --border-default: #2D2D31;
  --border-strong:  #52525B;
  --border-focus:   #A78BFA;

  /* accent */
  --accent-primary: #A78BFA;
  --accent-hover:   #8B5CF6;
  --accent-muted:   #2E2554;
  --accent-text:    #A78BFA; /* the accent as text: the accent itself */
  --text-interactive: #A78BFA;

  /* semantic */
  --info-default:    #60A5FA;
  --info-muted:      #172554;
  --warning-default: #FBBF24;
  --warning-muted:   #4A3728;
  --success-default: #34D399;
  --success-muted:   #0E392B;
  --error-default:   #F87171;
  --error-muted:     #4A2828;

  /* shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.30);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40);
  --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.16);
  /* Transparent colours (D16): designed per theme, never an opacity modifier. */
  --bg-wash:         rgba(255, 255, 255, 0.05);
  --accent-outline:  rgba(167, 139, 250, 0.3);
  --info-outline:    rgba(96, 165, 250, 0.3);
  --warning-outline: rgba(251, 191, 36, 0.3);
  --success-outline: rgba(52, 211, 153, 0.3);
  --error-outline:   rgba(248, 113, 113, 0.3);
  --accent-wash:     rgba(167, 139, 250, 0.11);
  --success-wash:    rgba(52, 211, 153, 0.11);
  --glow-warning:    0 0 5px rgba(251, 191, 36, 0.4);
  --glow-success:    0 0 5px rgba(52, 211, 153, 0.7);
  --glow-accent:     0 0 5px rgba(167, 139, 250, 0.6);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-strong:    rgba(0, 0, 0, 0.8);
  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
     always had: the elevated surface, primary text, the default border. */
  --bg-tooltip:     #1C1C1F;
  --text-tooltip:   #FAFAFA;
  --border-tooltip: #2D2D31;
  /* A shortcut key on a tooltip: what Kbd always drew here. */
  --bg-tooltip-key:     #27272A;
  --border-tooltip-key: #52525B;
  --text-tooltip-key:   #AEAEB6;
  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
     the inset ground, the default line, no shadow. */
  --bg-field:     #27272A;
  --border-field: #2D2D31;
  --shadow-field: 0 0 #0000;
  /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
     Here, bg-active, as Peek draws code (Katerina, 28 September). */
  --bg-code:     #2D2D31;
  /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
  --syntax-keyword: #ff7b72;
  --syntax-function: #d2a8ff;
  --syntax-constant: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-variable: #ffa657;
  --syntax-comment: #9198a1;
  --syntax-tag: #7ee787;
}


/* ─── signal ─── Peek's theme, the one it renders (peek/src/index.css .signal, 2026-08-28).
   Peek applies `.dark.signal`; this block comes after dark, so it wins. Peek's
   Signal-only extras (washes, glows, highlight, private, logo, mono) stay in Peek. */
.signal,
:root[data-theme='signal'] {
  /* surfaces (5-step, blue-shifted graphite) */
  --bg-base:     #0e1014;
  --bg-surface:  #12151a;
  --bg-elevated: #191d24;
  --bg-inset:    #20242d;
  --bg-hover:    rgba(255, 255, 255, 0.05);
  --bg-selected: rgba(86, 200, 255, 0.11);
  --bg-active:   rgba(255, 255, 255, 0.08);
  --bg-nav-active: rgba(86, 200, 255, 0.11); /* the current row in a sidebar: Peek's selected row (Katerina, 2 October) */
  --bg-disabled: #191d24;

  /* text */
  --text-primary:   #eef1f6;
  --text-secondary: #b2b9c6; /* nudged up from #a6adbb (2026-07-23) — same cool hue, one step brighter */
  --text-muted:     #6b7280;
  --text-disabled:  #464c58;
  --text-inverse:   #06121a;

  /* borders (alpha hairlines) */
  --border-subtle:  rgba(255, 255, 255, 0.065);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-focus:   #56c8ff;

  /* accent: ice cyan */
  --accent-primary: #56c8ff;
  --accent-hover:   #8ad6ff;
  --accent-muted:   rgba(86, 200, 255, 0.11);
  --accent-text:    #56c8ff; /* the accent as text: the accent itself */
  --text-interactive: #8ad6ff;

  /* semantic (amber is the attention color) */
  --info-default:    #8ad6ff;
  --info-muted:      rgba(86, 200, 255, 0.11);
  --warning-default: #ffb020;
  --warning-muted:   rgba(255, 176, 32, 0.12);
  --success-default: #3fde8c;
  --success-muted:   rgba(63, 222, 140, 0.11);
  --error-default:   #ff6b6b;
  --error-muted:     rgba(255, 107, 107, 0.12);

  /* shadows: black depth + 1px white rim on floating layers */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -8px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.45), 0 22px 60px -16px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.5), 0 36px 90px -16px rgba(0, 0, 0, 0.8);
  /* the glow a focused control wears — Peek's, verbatim */
  --focus-ring:   0 0 0 3px rgba(86, 200, 255, 0.12), 0 0 28px -8px rgba(86, 200, 255, 0.4);
  /* Transparent colours (D16): designed per theme, never an opacity modifier. */
  --bg-wash:         rgba(255, 255, 255, 0.05);
  --accent-outline:  rgba(86, 200, 255, 0.3);
  --info-outline:    rgba(86, 200, 255, 0.3); /* the accent blue: what the info chip has always drawn */
  --warning-outline: rgba(255, 176, 32, 0.3);
  --success-outline: rgba(63, 222, 140, 0.3);
  --error-outline:   rgba(255, 107, 107, 0.3);
  --accent-wash:     rgba(86, 200, 255, 0.11);
  --success-wash:    rgba(63, 222, 140, 0.11);
  --glow-warning:    0 0 5px rgba(255, 176, 32, 0.4);
  --glow-success:    0 0 5px rgba(63, 222, 140, 0.7);
  --glow-accent:     0 0 5px rgba(86, 200, 255, 0.6);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-strong:    rgba(0, 0, 0, 0.8);
  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
     always had: the elevated surface, primary text, the default border. */
  --bg-tooltip:     #191d24;
  --text-tooltip:   #eef1f6;
  --border-tooltip: rgba(255, 255, 255, 0.12);
  /* A shortcut key on a tooltip: what Kbd always drew here. */
  --bg-tooltip-key:     rgba(255, 255, 255, 0.05);
  --border-tooltip-key: rgba(255, 255, 255, 0.22);
  --text-tooltip-key:   #b2b9c6;
  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
     the inset ground, the default line, no shadow. */
  --bg-field:     #20242d;
  --border-field: rgba(255, 255, 255, 0.12);
  --shadow-field: 0 0 #0000;
  /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
     Here, bg-active, as Peek draws code (Katerina, 28 September). */
  --bg-code:     rgba(255, 255, 255, 0.08);
  /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
  --syntax-keyword: #ff7b72;
  --syntax-function: #d2a8ff;
  --syntax-constant: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-variable: #ffa657;
  --syntax-comment: #9198a1;
  --syntax-tag: #7ee787;
}

/* ─── ship ─── Ship's palette (Katerina's ruling, 2026-08-28; ship/web/src/index.css). */
:root[data-theme='ship'] {
  color-scheme: dark;

  /* bg */
  --bg-base:     #0e0f13;
  --bg-surface:  #16181f;
  --bg-elevated: #1c1f28;
  /* Lighter than the surfaces it sits on, as dark has it (its inset is the
     lightest background): a neutral Chip and a search field are bg-inset. */
  --bg-inset:    #1f2330;
  /* Translucent, so a hover reads on every surface. */
  --bg-hover:    rgba(255, 255, 255, 0.05);
  --bg-selected: rgba(75, 88, 212, 0.16);
  --bg-active:   rgba(255, 255, 255, 0.08);
  --bg-nav-active: rgba(255, 255, 255, 0.08); /* the current row in a sidebar */
  --bg-disabled: #16181f;

  /* text */
  --text-primary:   #e6e8ee;
  --text-secondary: #b3b9c7;
  --text-muted:     #8b91a1;
  --text-disabled:  #5b6070;
  /* Light, not dark: "inverse" is the text on the accent, and Ship's accent is
     dark enough that light text is the readable one (4.9:1). Katerina's
     ruling for the primary button, 2026-08-27. */
  --text-inverse:   #e6e8ee;

  /* borders (alpha hairlines, as Signal's — Katerina, 2026-08-28: Ship's
     inputs should carry the same border as Signal's; an alpha line reads on
     every surface, the inset field included) */
  --border-subtle:  rgba(255, 255, 255, 0.065);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-focus:   #4b58d4;

  /* accent — blue with a touch of purple; light text on it reads at 4.9:1 */
  --accent-primary: #4b58d4;
  --accent-hover:   #5c69dc;
  /* Grey, not navy (Katerina, 30 September): the navy behind a tag, a
     mention, a reaction and an info banner was hard to look at. The blue is
     only the words now — the same grey a neutral tag sits on. */
  --accent-muted:   var(--bg-inset);
  /* The accent as text: #4b58d4 read at 2.7:1 on a tag and 3.1:1 on the
     page. This reads at 6.6:1 on a tag (Katerina's pick, "2", 30 September). */
  --accent-text:    #9ca3e7;
  --text-interactive: #9ca3e7;

  /* semantic */
  /* Info is only ever text and a small icon (a link, an info banner, an info
     tag, Ship's In Progress icon): lightened with the accent, 4.0:1 → 6.9:1
     on its banner. */
  --info-default:    #94a9f0;
  --info-muted:      var(--bg-inset);
  --warning-default: #e0b04a;
  --warning-muted:   #3a2f14;
  --success-default: #46c08a;
  --success-muted:   #123326;
  --error-default:   #e5697a;
  --error-muted:     #3a1c22;

  /* shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  /* defined, as every theme must; Ship's controls show focus with the border alone */
  --focus-ring: 0 0 0 3px rgba(75, 88, 212, 0.16);
  /* Transparent colours (D16): designed per theme, never an opacity modifier. */
  --bg-wash:         rgba(255, 255, 255, 0.05);
  --accent-outline:  rgba(75, 88, 212, 0.3);
  --info-outline:    rgba(91, 123, 232, 0.3);
  --warning-outline: rgba(224, 176, 74, 0.3);
  --success-outline: rgba(70, 192, 138, 0.3);
  --error-outline:   rgba(229, 105, 122, 0.3);
  --accent-wash:     rgba(75, 88, 212, 0.11);
  --success-wash:    rgba(70, 192, 138, 0.11);
  --glow-warning:    0 0 5px rgba(224, 176, 74, 0.4);
  --glow-success:    0 0 5px rgba(70, 192, 138, 0.7);
  --glow-accent:     0 0 5px rgba(75, 88, 212, 0.6);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-strong:    rgba(0, 0, 0, 0.8);
  /* Tooltips have their own colours (Katerina, 27 September); here, the ones they
     always had: the elevated surface, primary text, the default border. */
  --bg-tooltip:     #1c1f28;
  --text-tooltip:   #e6e8ee;
  --border-tooltip: rgba(255, 255, 255, 0.12);
  /* A shortcut key on a tooltip: what Kbd always drew here. */
  --bg-tooltip-key:     rgba(255, 255, 255, 0.05);
  --border-tooltip-key: rgba(255, 255, 255, 0.22);
  --text-tooltip-key:   #b3b9c7;
  /* A field has its own colours (Katerina, 28 September); here, the ones it always had:
     the inset ground, the default line, no shadow. */
  --bg-field:     #1f2330;
  --border-field: rgba(255, 255, 255, 0.12);
  --shadow-field: 0 0 #0000;
  /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
     Here, bg-active, as Peek draws code (Katerina, 28 September). */
  --bg-code:     rgba(255, 255, 255, 0.08);
  /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
  --syntax-keyword: #ff7b72;
  --syntax-function: #d2a8ff;
  --syntax-constant: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-variable: #ffa657;
  --syntax-comment: #9198a1;
  --syntax-tag: #7ee787;
}

/* ─── leaf ─── Leaf's theme: Linear's light theme on these same tokens (Katerina,
   27–28 September: "I like Linear's theme more", and "get it right, not by
   screenshot"). Read from the Linear app itself: its named colours
   (--color-bg-*, --color-border-*, --color-text-*, --focus-ring-color), dumped
   from a signed-in tab on 28 September and turned from LCH into sRGB by Chrome.
   Where Linear names no colour for one of these tokens, the light theme's stays
   (marked "light"); menus, the toolbar and tooltips follow her rulings. */
:root[data-theme='leaf'] {
  color-scheme: light;

  /* bg */
  --bg-base:     #efeff0; /* --color-bg-quaternary, the app's ground and sidebar */
  --bg-surface:  #f9f9fa; /* --color-bg-primary, the content panel and header */
  --bg-elevated: #ffffff; /* menus and the toolbar are white (Katerina, 27 September) */
  --bg-inset:    #e9e9ea; /* --color-bg-secondary: not the ground, or an inset card and a skeleton vanish on it (Katerina, 28 September) */
  /* See-through, so a hover shows on a row that is itself hovered or grey (Katerina, 28 September):
     6.4% black is Linear's --color-bg-secondary (#e9e9ea) on its content panel. */
  --bg-hover:    rgba(0, 0, 0, 0.064);
  --bg-selected: #e5e5e6; /* --color-bg-tertiary */
  --bg-active:   #e1e1e2; /* the selected sidebar row (lch 89.54%) */
  --bg-nav-active: #e1e1e2; /* the current row in a sidebar */
  --bg-disabled: #efeff0; /* the base, as light has it */

  /* text */
  --text-primary:   #1b1b1b; /* --color-text-primary */
  --text-secondary: #5c5c5e; /* --color-text-tertiary: labels, descriptions, icons */
  --text-muted:     #9c9d9f; /* --color-text-quaternary: placeholders, counts */
  --text-disabled:  #D4D4D8; /* light */
  --text-inverse:   #ffffff;
  --text-interactive: #1b1b1b; /* --app-link-color: a link is the text colour */

  /* borders */
  /* One step darker than Linear's own faintest line (Katerina, 28 September): our cards, chips and
     toasts draw their edge with subtle, and Linear's #f1f1f1 vanished on white and on the ground. */
  --border-subtle:  #e5e5e6; /* --color-bg-tertiary */
  --border-default: #dedede; /* --color-border-secondary */
  --border-strong:  #d3d3d3; /* --color-border-tertiary */
  --border-focus:   #5e69d1; /* --focus-ring-color */

  /* accent — Linear's indigo */
  --accent-primary: #5e69d1; /* --focus-ring-color, the selection's colour */
  --accent-hover:   #6b75df; /* not named in Linear's set: the indigo beside it in the app's own values */
  --accent-muted:   #EDE9FE; /* light */
  --accent-text:    #5e69d1; /* the accent as text: the accent itself */

  /* semantic — light, until Linear's are read */
  --info-default:    #3B82F6;
  --info-muted:      #DBEAFE;
  --warning-default: #967000; /* Linear's darkest yellow: readable on the warning wash (Katerina, 28 September) */
  --warning-muted:   #FEF3C7;
  --success-default: #0EA06F;
  --success-muted:   #D1FAE5;
  --error-default:   #EF4444;
  --error-muted:     #FEE2E2;

  /* shadows — light */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --focus-ring: 0 0 0 1px #5e69d1; /* --focus-ring-outline: 1px of the accent */
  /* Transparent colours (D16): light's strengths, on Linear's indigo. */
  --bg-wash:         rgba(0, 0, 0, 0.04);
  --accent-outline:  rgba(94, 105, 209, 0.3);
  --info-outline:    rgba(59, 130, 246, 0.3);
  --warning-outline: rgba(245, 158, 11, 0.3);
  --success-outline: rgba(14, 160, 111, 0.3);
  --error-outline:   rgba(239, 68, 68, 0.3);
  --accent-wash:     rgba(94, 105, 209, 0.11);
  --success-wash:    rgba(14, 160, 111, 0.11);
  --glow-warning:    0 0 5px rgba(245, 158, 11, 0.4);
  --glow-success:    0 0 5px rgba(14, 160, 111, 0.7);
  --glow-accent:     0 0 5px rgba(94, 105, 209, 0.6);
  --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --scrim:           rgba(0, 0, 0, 0.5);
  --scrim-strong:    rgba(0, 0, 0, 0.8);
  /* Tooltips are dark on the light page (Katerina, 27 September): Linear's text colour as the ground. */
  --bg-tooltip:     #1b1b1b;
  --text-tooltip:   #ffffff;
  --border-tooltip: #1b1b1b;
  /* A shortcut key on the dark tooltip: a faint light key. */
  --bg-tooltip-key:     rgba(255, 255, 255, 0.1);
  --border-tooltip-key: rgba(255, 255, 255, 0.18);
  --text-tooltip-key:   rgba(255, 255, 255, 0.75);
  /* A field is Linear's: white, a faint line, a soft two-layer shadow (read from its
     comment box, 28 September: lch(100), lch(97.3), 0 3px 6px -2px at 2% and 0 1px 1px at 4%). */
  --bg-field:     #ffffff;
  --border-field: #dedede; /* the default line, so a field shows on a white dialog (Katerina, 28 September); Linear's own is #f7f7f7 */
  --shadow-field: 0 3px 6px -2px rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
  /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
     Here, the inset fill: lighter than bg-active on a white card (Katerina, 28 September). */
  --bg-code:     #e9e9ea;
  /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
  --syntax-keyword: #c21f2b;
  --syntax-function: #6639ba;
  --syntax-constant: #0550ae;
  --syntax-string: #0a3069;
  --syntax-variable: #953800;
  --syntax-comment: #59636e;
  --syntax-tag: #116329;
}