/* DESIGN-TOKENS (mockups 18): one token vocabulary, six named Appearance packs.
   Colour lives only inside html[data-theme=<slug>] blocks (THEME-PACKS rev 2). No hex elsewhere.
   Non-colour scales here. --d-* surface tokens are defined in every pack (D-7).
   PP4 FE-12 (D-P30, Jordan 2026-09-10): each pack block also scopes to .ws-swatch[data-theme=<slug>] so a Profile
   picker swatch paints its own pack's surfaces from the same tokens; selectors only, no second palette. */
:root{
  --f-ui:'Hanken Grotesk',system-ui,sans-serif; --f-display:'Fraunces',Georgia,serif;
  --t-place:24px; --t-name:16px; --t-lg:14px; --t-md:13px; --t-sm:12px; --t-micro:11px; --t-xs:10px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --chip-y:2px; --chip-x:8px; --bar:3px;
  --r-card:12px; --r-chip:999px;
  /* derived (no hex): */
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--ember);
  --greenD:color-mix(in srgb,var(--green) 8%,transparent);
  --hover:color-mix(in srgb,var(--ink) 4%,transparent);
  --shadow-overlay:0 24px 70px color-mix(in srgb,var(--ink) 32%,transparent);
  --shadow-card:0 2px 6px color-mix(in srgb,var(--ink) 10%,transparent);
  --shadow-table:0 1px 3px color-mix(in srgb,var(--ink) 8%,transparent);
  --shadow-popover:0 8px 24px rgba(0,0,0,.35);
}
/* Linen · default light */
html:not([data-theme]),html[data-theme="linen"],.ws-swatch[data-theme="linen"]{
  --bg:#F0EAE0; --bg2:#F0EAE0; --card:#FFFFFF; --line:#E0D7C8; --ink:#221C14; --ink2:#584F41; --muted:#6E6452;
  --ember:#D9481F; --emberL:#B93A14; --green:#3F7038; --gold:#8A6418;
  --d-well:#FFFFFF; --d-raise:#FFFFFF; --d-fill:#E4DCCE; --d-edge:#CBBFAA;
  color-scheme:light;
}
/* Sage Garden · light */
html[data-theme="sage"],.ws-swatch[data-theme="sage"]{
  --bg:#EAEEE6; --bg2:#F3F6F0; --card:#FFFFFF; --line:#CDD6C9; --ink:#1C231A; --ink2:#4F5B4B; --muted:#62705E;
  --ember:#D9481F; --emberL:#B93A14; --green:#3F7038; --gold:#8A6418;
  --d-well:#EAEEE6; --d-raise:#FFFFFF; --d-fill:#DBE1D6; --d-edge:#B5C3B0;
  color-scheme:light;
}
/* Ivory & Navy · light */
html[data-theme="ivory-navy"],.ws-swatch[data-theme="ivory-navy"]{
  --bg:#F7F2E8; --bg2:#F7F2E8; --card:#FFFFFF; --line:#D9CFBF; --ink:#1C2A3A; --ink2:#4A5566; --muted:#5E6878;
  --ember:#D9481F; --emberL:#B93A14; --green:#3F7038; --gold:#8A6418;
  --d-well:#EAE3D5; --d-raise:#FFFFFF; --d-fill:#EAE3D5; --d-edge:#B7AC98;
  color-scheme:light;
}
/* Dark · default dark (DARK-NOTES, unchanged token for token) */
html[data-theme="dark"],.ws-swatch[data-theme="dark"]{
  --bg:#1C1813; --bg2:#131009; --card:#2A251E; --line:#453D33; --ink:#F3EDE3; --ink2:#C9BFB0; --muted:#A0968A;
  --ember:#E25A31; --emberL:#F07A55; --green:#8CC284; --gold:#D6B066;
  --d-well:#231E18; --d-raise:#2E2921; --d-fill:#3A332B; --d-edge:#4C4439;
  color-scheme:dark;
}
/* Matte Black · dark */
html[data-theme="matte-black"],.ws-swatch[data-theme="matte-black"]{
  --bg:#0E0E0E; --bg2:#050505; --card:#1C1C1C; --line:#2E2E2E; --ink:#F3EDE3; --ink2:#C9C2B6; --muted:#9E978C;
  --ember:#E25A31; --emberL:#F07A55; --green:#8CC284; --gold:#D6B066;
  --d-well:#161616; --d-raise:#262626; --d-fill:#2E2E2E; --d-edge:#3F3F3F;
  color-scheme:dark;
}
/* Midnight Ink · dark */
html[data-theme="midnight"],.ws-swatch[data-theme="midnight"]{
  --bg:#1A1D23; --bg2:#12141A; --card:#262A31; --line:#3E434D; --ink:#F1ECE4; --ink2:#C4C0B8; --muted:#9C9890;
  --ember:#E86A45; --emberL:#F48A68; --green:#8FCB8E; --gold:#D9B86E;
  --d-well:#20242B; --d-raise:#2D323A; --d-fill:#383E48; --d-edge:#4C525E;
  color-scheme:dark;
}
/* Dark elevation (DESIGN-TOKENS): black only, never --ink. Pop = menus; sheet = floating sheets / confirms / Ask drawer. */
:root[data-mode="dark"]{
  --d-shadow-pop:0 8px 24px rgba(0,0,0,.35);
  --d-shadow-sheet:0 16px 40px rgba(0,0,0,.40);
  --shadow-popover:var(--d-shadow-pop);
  --shadow-overlay:var(--d-shadow-sheet);
}
/* Mode-only rules (icon swap, overlay density). data-mode is set by the theme bootstrap from the slug. */
:root[data-mode="dark"] .ws-thread .acard-body,
:root[data-mode="dark"] .ws-thread .pin{color:var(--ink2)}
:root[data-mode="dark"] .tgl .ic-moon{display:none}
:root[data-mode="dark"] .tgl .ic-sun{display:block}
:root[data-mode="dark"] .ws-dcard,
:root[data-mode="dark"] .ws-card,
:root[data-mode="dark"] .ws-hcard,
:root[data-mode="dark"] .ws-qtable,
:root[data-mode="dark"] .ws-rows{box-shadow:none}
.ws-stage{background:var(--bg)}
.ws-thread .fchip,.ws-canvas .fchip{border-color:color-mix(in srgb,var(--ember) 40%,transparent);color:var(--ember)}
.ws-thread .fchip:hover,.ws-canvas .fchip:hover{background:color-mix(in srgb,var(--ember) 8%,transparent)}
.ws-thread .fchip.go,.ws-canvas .fchip.go{background:var(--ember);border-color:var(--ember);color:var(--card)}
.ws-thread .fchip.go:hover,.ws-canvas .fchip.go:hover{background:var(--ember);filter:brightness(.92)}
.ws-canvas .btn.primary{background:var(--ember);border-color:var(--ember);color:var(--card);box-shadow:none}
.ws-thread .dstat-value.ember,.ws-canvas .dstat-value.ember{color:var(--ember)}
.ws-thread .acard.staged{border:1.5px dashed var(--ember);background:var(--card)}
.ws-thread .acard.staged .acard-title,.ws-thread .acard.staged b{color:var(--ember)}
.ws-thread .ctxcard{border-color:var(--line);background:var(--card)}
.ws-thread .ctxcard .ctxeye{color:var(--muted)}
.ws-thread .okline{color:var(--green)}
.ws-thread .rlink,.ws-thread .mask{color:var(--muted);border-color:var(--line)}
.ws-thread .rlink{border-bottom-color:var(--line)}
.ws-thread .turn-meta,.ws-thread .turn-meta-line1,.ws-thread .turn-meta-receipts,
.ws-thread .turn-meta-link,.ws-thread .turn-meta-feedback,.ws-thread .turn-meta .cstamp,
.ws-thread .edu-note{font-size:var(--t-micro)}
.ws-thread button:focus-visible,.ws-canvas button:focus-visible,
.ws-thread .fchip:focus-visible,.ws-canvas .fchip:focus-visible,
.ws-thread [tabindex]:focus-visible,.ws-canvas [tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:4px
}