/* e18-ui tokens: the only place a colour value is written (docs/theme.md). Light in :root, dark in
   :root[data-theme="dark"] (set before the first paint by snippets/theme-head.js). Components and apps use var(--…) only;
   an app adds its own tokens in its own sheet and never redefines these. */
:root{
  color-scheme:light;
  --page:#EEF0F3; --surface:#FFFFFF; --surface-2:#F4F5F7; --surface-3:#E7E9ED;
  --ink:#16191F; --ink-2:#434954; --ink-3:#646A75; --ink-4:#9AA0AA;
  --hair:rgba(22,25,31,.08); --hair-2:rgba(22,25,31,.15);
  --mat:#2B2C2F; --mat-2:#38393D;                      /* neutral dark mat behind artwork, the same in both themes */
  --marker:#D9362C; --marker-hi:#C42F26; --on-marker:#FFFFFF; --marker-soft:rgba(217,54,44,.09); --marker-ink:#A9251D;
  --pri-vi:#FF5C5C; --pri-im:#FFD84D; --pri-sh:#A8E6B8; --pri-po:#CFE2FF; --on-pri:#1A1C21;
  --vi-ink:#B4231B; --im-ink:#7A5B00; --sh-ink:#1D6B3E; --po-ink:#2F5597;
  --ok:#1F8A53; --warn:#9A6200;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 0 0 1px var(--hair);
  --shadow-lift:0 1px 2px rgba(16,24,40,.05),0 18px 40px -24px rgba(16,24,40,.28),0 0 0 1px var(--hair);
  /* studio blue: selection, focus, send, links */
  --accent:#2457D6; --accent-hi:#1F4CBF; --accent-soft:rgba(36,87,214,.10); --accent-ink:#1B3F9E; --on-accent:#FFFFFF;
  --side:#F6F7F9; --row-hover:rgba(22,25,31,.05); --row-press:rgba(22,25,31,.08);
  --thumb:rgba(22,25,31,.16); --thumb-hi:rgba(22,25,31,.3); --bubble:#E6ECFB; --scrim:rgba(16,24,40,.35);
  --shade:#101828;                                     /* base of color-mix shadows and dim layers */
  --flag-mix:85%;                                      /* #031 tiles: share of the tile colour in its text */
  /* tones (docs/theme.md §5.5): base for dots/borders/solid fills, -soft for tinted backgrounds, -ink for text on -soft */
  --tone-red:var(--marker); --tone-red-soft:var(--marker-soft); --tone-red-ink:var(--marker-ink);
  --tone-orange:#E07A1F; --tone-orange-soft:rgba(224,122,31,.12); --tone-orange-ink:#9A4E0B;
  --tone-purple:#7B4FD6; --tone-purple-soft:rgba(123,79,214,.11); --tone-purple-ink:#5A33AE;
  --tone-yellow:#C99A00; --tone-yellow-soft:rgba(255,216,77,.28); --tone-yellow-ink:#7A5B00;
  --tone-blue:#2F6FD6; --tone-blue-soft:rgba(47,111,214,.10); --tone-blue-ink:#24549F;
  --tone-green:#1F8A53; --tone-green-soft:rgba(31,138,83,.11); --tone-green-ink:#16683E;
  --tone-teal:#0E7490; --tone-teal-soft:rgba(14,116,144,.11); --tone-teal-ink:#0B5A70;
  --font:"Be Vietnam Pro",system-ui,sans-serif;
  --display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.45,.64,1);

  /* Lucian tokens → plan */
  --ux-page:var(--page); --ux-surface:var(--surface); --ux-surface-2:var(--surface-2); --ux-surface-3:var(--surface-3);
  --ux-ink:var(--ink); --ux-ink-2:var(--ink-2); --ux-ink-3:var(--ink-3);
  --ux-line:var(--hair); --ux-line-2:var(--hair-2);
  --ux-accent:var(--accent); --ux-accent-2:var(--pri-im); --ux-accent-soft:var(--accent-soft); --ux-accent-ink:var(--on-accent);
  --ux-mint:var(--ok); --ux-warn:var(--warn); --ux-danger:var(--vi-ink);
  --ux-glass:rgba(255,255,255,.7); --ux-glass-line:rgba(255,255,255,.9);
  --ux-shadow:rgba(16,24,40,.12); --ux-shadow-strong:rgba(16,24,40,.24);
  --ux-grad:var(--accent); --ux-ease:var(--ease); --ux-spring:var(--spring);
}
/* dark theme: html[data-theme="dark"], set before the first paint (docs/theme.md §2). Only tokens change here. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0F1522; --surface:#171E2D; --surface-2:#1D2536; --surface-3:#273145;
  --ink:#E8EBF2; --ink-2:#BDC4D1; --ink-3:#8E97A8; --ink-4:#667085;
  --hair:rgba(232,235,242,.08); --hair-2:rgba(232,235,242,.16);
  --marker-soft:rgba(240,91,80,.16); --marker-ink:#FF9B92;
  --vi-ink:#FF8A80; --im-ink:#E8C55A; --sh-ink:#6FD39A; --po-ink:#8FB4FF;
  --ok:#3DBE7E; --warn:#E3A93B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 0 0 1px var(--hair);
  --shadow-lift:0 1px 2px rgba(0,0,0,.3),0 18px 40px -24px rgba(0,0,0,.7),0 0 0 1px var(--hair);
  --accent:#5B8CFF; --accent-hi:#7AA2FF; --accent-soft:rgba(91,140,255,.16); --accent-ink:#A8C2FF; --on-accent:#0B1430;
  --side:#131A28; --row-hover:rgba(232,235,242,.05); --row-press:rgba(232,235,242,.09);
  --thumb:rgba(232,235,242,.16); --thumb-hi:rgba(232,235,242,.3); --bubble:#223051; --scrim:rgba(0,0,0,.55);
  --shade:#000;
  --flag-mix:55%;
  --tone-orange:#F0954A; --tone-orange-soft:rgba(240,149,74,.16); --tone-orange-ink:#FFC08A;
  --tone-purple:#A884FF; --tone-purple-soft:rgba(168,132,255,.16); --tone-purple-ink:#CDB6FF;
  --tone-yellow:#E3B341; --tone-yellow-soft:rgba(227,179,65,.18); --tone-yellow-ink:#F2CF6B;
  --tone-blue:#6E9BFF; --tone-blue-soft:rgba(110,155,255,.16); --tone-blue-ink:#A8C2FF;
  --tone-green:#3DBE7E; --tone-green-soft:rgba(61,190,126,.16); --tone-green-ink:#86E0AE;
  --tone-teal:#2BB3CF; --tone-teal-soft:rgba(43,179,207,.16); --tone-teal-ink:#86DCEC;
  --ux-glass:rgba(23,30,45,.72); --ux-glass-line:rgba(232,235,242,.08);
  --ux-shadow:rgba(0,0,0,.4); --ux-shadow-strong:rgba(0,0,0,.6);
}