/*! ============================================================================
 *  HELM Design Tokens — canonical source of truth
 *  ----------------------------------------------------------------------------
 *  Consolidated from the v5 release packages (helm-theme.css + helm-creative.css
 *  + helm-components.css). Every v5 token VALUE is preserved byte-for-byte; the
 *  blocks marked "HELM addition" are new (focus, motion, z-index, state-soft /
 *  on-color, overlay scrim, per-surface density). This file is PURE VARIABLES —
 *  no element styling — so it can sit under MudBlazor, Radzen, QuickGrid, a
 *  bespoke HELM kit, or a native client without conflict.
 *
 *  Consume by setting attributes on <html> (or any subtree to scope a region):
 *    data-brand   = (default Neighbourly) | "creative"
 *    data-theme   = (default light)       | "dark"
 *    data-app     = helm|datum|place|anchor|wake|sonar|chart|atlas|range|compass|fleet
 *                   |wave|port|cargo|beacon|harbor|haven|deck|care|almanac|waypoint|channel|bridge
 *    data-surface = "ops" | "workspace" (default) | "consumer"
 *
 *  e.g.  <html data-app="compass" data-surface="ops" data-theme="dark">
 * ========================================================================== */

/* ============================================================
   1 · BASE / Neighbourly brand (light)        [v5 helm-theme.css]
   ============================================================ */
:root {
  /* Brand primitives */
  --helm-blue:#282A71; --helm-green:#56BE8B; --helm-dark-grey:#464647; --helm-light-grey:#F7F8F9;
  --helm-blue-700:#21225D; --helm-blue-50:#EEEEF4; --helm-green-50:#EBF7F1;

  /* Semantic — color (--color-primary and friends follow the app accent: §3b) */
  --color-accent:var(--helm-green); --color-accent-soft:var(--helm-green-50);
  --color-success:#56BE8B; --color-warning:#E0A33C; --color-danger:#D14343; --color-info:#2F6FED;

  /* Surfaces & text */
  --bg-app:#F7F8F9; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#F0F1F2;
  --border:#DEDFE0; --border-strong:#C6C6C7;
  --text-strong:#1A1C2E; --text-default:#464647; --text-muted:#6E6E6E; /* muted darkened #878787->#6E6E6E for WCAG AA body contrast */

  /* Type */
  --font-heading:"Lufga","Montserrat","Segoe UI",Arial,sans-serif;
  --font-body:"Montserrat","Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,monospace;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; --fs-3xl:44px;
  --fw-body:500; --fw-medium:600; --fw-bold:800; --lh-tight:1.15; --lh-body:1.55;

  /* Shape & space */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 4px 12px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);

  /* The active app accent (--accent, --accent-fill, --accent-ink, …) is generated per [data-app] in §4, whose
     first block is also the default here. Chrome (HelmAppShell topbar, app bars) backs off --chrome-bg and
     --on-chrome (§3b), not --color-primary. */

  /* ---- HELM addition · state soft-fills + readable on-color ---- */
  --color-success-soft:#EBF7F1; --color-on-success:#1E5C40;
  --color-warning-soft:#FBF1E0; --color-on-warning:#7A5314;
  --color-danger-soft:#FBEAEA;  --color-on-danger:#8A2A2A;
  --color-info-soft:#EAF1FD;    --color-on-info:#1B4FB0;

  /* ---- HELM addition · overlay scrim ---- */
  --bg-overlay:rgba(16,24,40,.45);

  /* ---- HELM addition · focus ring (keyboard; --focus-ring itself follows the accent: §3b) ---- */
  --focus-ring-danger:0 0 0 3px color-mix(in srgb, var(--color-danger) 40%, transparent);

  /* ---- HELM addition · motion ---- */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-emphasized:cubic-bezier(.3,0,0,1);

  /* ---- HELM addition · z-index scale ---- */
  --z-sticky:100; --z-dropdown:1000; --z-overlay:1100; --z-modal:1200; --z-toast:1300;

  /* ---- HELM addition · density defaults (= workspace/comfortable) ---- */
  --control-h:40px; --row-h:48px; --gutter:var(--space-4); --fs-base:var(--fs-md);

  /* ---- HELM addition · shell geometry (K4) ---- */
  --shell-bar-h:56px; --shell-nav-w:240px;
}

/* ============================================================
   2 · DARK theme                              [v5 + additions]
   ============================================================ */
[data-theme="dark"] {
  --bg-app:#0E1326; --bg-surface:#161C33; --bg-raised:#1C2340; --bg-sunken:#0A0F1F;
  --border:#262E4D; --border-strong:#38416B;
  --text-strong:#F4F6FB; --text-default:#C4CBDC; --text-muted:#8A92A8;
  --color-accent:#67C497; /* the accent itself is generated per app for dark too (§4); the chrome is §3b */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --shadow-lg:0 12px 32px rgba(0,0,0,.55);

  /* ---- HELM addition (dark) ---- */
  --color-success-soft:#13301F; --color-on-success:#8FE3B6;
  --color-warning-soft:#3A2C12; --color-on-warning:#F2C572;
  --color-danger-soft:#3A1A1A;  --color-on-danger:#F1A1A1;
  --color-info-soft:#16213F;    --color-on-info:#9DB9F2;
  --bg-overlay:rgba(0,0,0,.6);
}

/* ============================================================
   3 · CREATIVE brand                          [v5 helm-creative.css]
   ============================================================ */
:root[data-brand="creative"] {
  --color-accent:#17B6A7; --color-accent-soft:#E3F6F4; --color-info:#3B82F6;
  --bg-app:#EEF3F8; --bg-surface:#FFFFFF; --border:#D6DBDF;
  --accent:#17B6A7; --accent-ink:#0F7A70; --accent-soft:#E3F6F4; --accent-line:#128E82;
  --accent-fill:#0B1B33; --accent-fill-hover:#28364B; --on-accent:#FFFFFF;
  --font-heading:"Sora","Montserrat","Segoe UI",Arial,sans-serif;
}
:root[data-brand="creative"][data-theme="dark"] {
  --bg-app:#0B1B33; --bg-surface:#1A293F; --bg-raised:#233247; --border:#2D3B50;
  --accent:#17B6A7; --accent-ink:#17B6A7; --accent-line:#17B6A7;
  --accent-fill:#17B6A7; --accent-fill-hover:#3CC7BA; --on-accent:#0B1B33;
}

/* ============================================================
   3b · SEMANTIC accent mapping                [HELM addition, K2]
   ------------------------------------------------------------
   Re-declared on every [data-app] element, not only :root, so the
   names resolve against THAT element's accent: a var() in a custom
   property is computed where it is declared, which is why the shell's
   own data-app used to keep the light values in dark mode.
     --accent         the app's vivid brand hue: marks, stripes, tiles
     --accent-fill    filled surfaces (top bar, primary button); its text
                      is --on-accent, which the generator picks to read
     --accent-ink     text set in the accent on its ground (≥ 4.5:1)
     --accent-line    focus, borders, bars, tab underline (≥ 3:1)
   ============================================================ */
:root, [data-app] {
  --color-primary:var(--accent-fill); --color-primary-hover:var(--accent-fill-hover);
  --color-primary-soft:var(--accent-soft);
  --chrome-bg:var(--accent-fill); --on-chrome:var(--on-accent);
  /* Back-compat: hosts set top-bar text with --text-on-primary (Navigator's chrome, FLEET), so it keeps meaning
     "text on the chrome" — light on the dark chrome in dark mode. Text on a filled primary control uses
     --on-accent, which is dark on the dark-mode tint. New code: --on-chrome or --on-accent, never this. */
  --text-on-primary:var(--on-chrome);
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent-line) 40%, transparent);
}
/* Dark chrome is a neutral, not the app's fill, so app bars darken with the theme; its text is light. */
[data-theme="dark"], [data-theme="dark"] [data-app] { --chrome-bg:#1C2340; --on-chrome:#F4F6FB; }

/* ============================================================
   4 · PER-APP accents                         [GENERATED — K2]
   ------------------------------------------------------------
   Source: tokens/helm-tokens.json, through tools/gen_tokens.py,
   which applies the readability rule (decisions.md 2026-10-13).
   Do not edit between the markers: edit the JSON and re-run.
   ============================================================ */
/* BEGIN GENERATED: per-app accents (tools/gen_tokens.py from tokens/helm-tokens.json) */
/* Light. The first block is also the default with no [data-app] at all. */
:root, [data-app="helm"] {--accent:#282A71;--accent-fill:#282A71;--accent-fill-hover:#1B195F;--on-accent:#FFFFFF;--accent-ink:#1F2158;--accent-line:#282A71;--accent-soft:#EAEAF1;--accent-100:#D8D9E5;} /* core */
[data-app="datum"] {--accent:#5B5FCF;--accent-fill:#5B5FCF;--accent-fill-hover:#4C4CBB;--on-accent:#FFFFFF;--accent-ink:#474AA1;--accent-line:#5B5FCF;--accent-soft:#EFEFFA;--accent-100:#E1E2F6;} /* foundation · Shared Meaning & Contracts */
[data-app="place"] {--accent:#2E7DB8;--accent-fill:#2374AE;--accent-fill-hover:#05629B;--on-accent:#FFFFFF;--accent-ink:#246290;--accent-line:#2E7DB8;--accent-soft:#EAF2F8;--accent-100:#D9E8F2;} /* foundation · Site & Endpoint Truth */
[data-app="anchor"] {--accent:#5B6B7B;--accent-fill:#5B6B7B;--accent-fill-hover:#4A5A6A;--on-accent:#FFFFFF;--accent-ink:#475360;--accent-line:#5B6B7B;--accent-soft:#EFF0F2;--accent-100:#E1E4E7;} /* foundation · Provisioning & Control */
[data-app="wake"] {--accent:#1F7A8C;--accent-fill:#1F7A8C;--accent-fill-hover:#00687A;--on-accent:#FFFFFF;--accent-ink:#185E6C;--accent-line:#1F7A8C;--accent-soft:#E8F3F5;--accent-100:#D4E9ED;} /* foundation · Audit & Evidence */
[data-app="sonar"] {--accent:#1497A6;--accent-fill:#007A89;--accent-fill-hover:#006877;--on-accent:#FFFFFF;--accent-ink:#107682;--accent-line:#1497A6;--accent-soft:#E7F4F6;--accent-100:#D3E9ED;} /* foundation · Query & Retrieval */
[data-app="chart"] {--accent:#E08A3C;--accent-fill:#E08A3C;--accent-fill-hover:#F59D51;--on-accent:#1A1C2E;--accent-ink:#A15F20;--accent-line:#A15F20;--accent-soft:#FCF3EC;--accent-100:#F9EADC;} /* truth · Healthcare Truth */
[data-app="atlas"] {--accent:#1F9C9C;--accent-fill:#007C7D;--accent-fill-hover:#006A6B;--on-accent:#FFFFFF;--accent-ink:#187A7A;--accent-line:#187A7A;--accent-soft:#E9F5F5;--accent-100:#D7EDED;} /* truth · Market & Territory */
[data-app="range"] {--accent:#BC5A93;--accent-fill:#AD4D86;--accent-fill-hover:#993B74;--on-accent:#FFFFFF;--accent-ink:#954874;--accent-line:#BC5A93;--accent-soft:#FAEEF5;--accent-100:#F4DCEA;} /* truth · Map & Distance */
[data-app="compass"] {--accent:#56BE8B;--accent-fill:#56BE8B;--accent-fill-hover:#6AD19D;--on-accent:#1A1C2E;--accent-ink:#297D56;--accent-line:#297D56;--accent-soft:#EEF8F3;--accent-100:#E1F3EA;} /* truth · Pricing & Decisions */
[data-app="fleet"] {--accent:#2F6FED;--accent-fill:#2F6FED;--accent-fill-hover:#1C5CD8;--on-accent:#FFFFFF;--accent-ink:#2557B9;--accent-line:#2F6FED;--accent-soft:#EAF1FD;--accent-100:#DAE5FC;} /* movement · Fulfillment & Logistics */
[data-app="wave"] {--accent:#21A8C4;--accent-fill:#21A8C4;--accent-fill-hover:#3EBBD8;--on-accent:#1A1C2E;--accent-ink:#057A90;--accent-line:#057A90;--accent-soft:#E9F6F9;--accent-100:#D7EFF4;} /* movement · Work Availability */
[data-app="port"] {--accent:#4A5DE8;--accent-fill:#4A5DE8;--accent-fill-hover:#3C49D3;--on-accent:#FFFFFF;--accent-ink:#3A49B5;--accent-line:#4A5DE8;--accent-soft:#EDEFFD;--accent-100:#DEE2FB;} /* movement · Rx Intake & Transfer */
[data-app="cargo"] {--accent:#C77F33;--accent-fill:#A45E00;--accent-fill-hover:#914C00;--on-accent:#FFFFFF;--accent-ink:#9A6227;--accent-line:#9A6227;--accent-soft:#F9F2EB;--accent-100:#F5E8DA;} /* movement · Inventory & Replenishment */
[data-app="beacon"] {--accent:#E86A5C;--accent-fill:#C0463B;--accent-fill-hover:#AB322A;--on-accent:#FFFFFF;--accent-ink:#B35146;--accent-line:#B35146;--accent-soft:#FDF0EF;--accent-100:#FBE4E2;} /* engage · Patient Outreach */
[data-app="harbor"] {--accent:#0E9F6E;--accent-fill:#007F50;--accent-fill-hover:#006D3F;--on-accent:#FFFFFF;--accent-ink:#0B7C56;--accent-line:#0E9F6E;--accent-soft:#E7F5F0;--accent-100:#D4EEE5;} /* engage · Payments */
[data-app="deck"] {--accent:#8A4FBF;--accent-fill:#8A4FBF;--accent-fill-hover:#783CAB;--on-accent:#FFFFFF;--accent-ink:#6E3F99;--accent-line:#8A4FBF;--accent-soft:#F3EDF9;--accent-100:#E7DBF2;} /* engage · Pharmacy Workspace */
[data-app="care"] {--accent:#AD4A57;--accent-fill:#AD4A57;--accent-fill-hover:#993847;--on-accent:#FFFFFF;--accent-ink:#873A44;--accent-line:#AD4A57;--accent-soft:#F7EDEE;--accent-100:#F0DEE1;} /* engage · Clinical Opportunities (CARE) */
[data-app="almanac"] {--accent:#7A6418;--accent-fill:#7A6418;--accent-fill-hover:#695300;--on-accent:#FFFFFF;--accent-ink:#5F4E13;--accent-line:#7A6418;--accent-soft:#F2F0E8;--accent-100:#E7E3D5;} /* engage · Public Reference & Catalog (ALMANAC) */
[data-app="haven"] {--accent:#3D6A3A;--accent-fill:#3D6A3A;--accent-fill-hover:#2C592A;--on-accent:#FFFFFF;--accent-ink:#30532D;--accent-line:#3D6A3A;--accent-soft:#ECF0EB;--accent-100:#DCE4DC;} /* foundation · control plane, beside ANCHOR · Backup orchestration (HAVEN) */
[data-app="waypoint"] {--accent:#607089;--accent-fill:#607089;--accent-fill-hover:#4F5F77;--on-accent:#FFFFFF;--accent-ink:#4B576B;--accent-line:#607089;--accent-soft:#EFF1F3;--accent-100:#E2E5EA;} /* transport · Tenant Router */
[data-app="channel"] {--accent:#2E8FB0;--accent-fill:#047898;--accent-fill-hover:#006686;--on-accent:#FFFFFF;--accent-ink:#247089;--accent-line:#2E8FB0;--accent-soft:#EAF4F7;--accent-100:#D9EBF1;} /* transport · Per-Tenant Connection */
[data-app="bridge"] {--accent:#4A6FA5;--accent-fill:#4A6FA5;--accent-fill-hover:#395E92;--on-accent:#FFFFFF;--accent-ink:#3A5781;--accent-line:#4A6FA5;--accent-soft:#EDF1F6;--accent-100:#DEE5EF;} /* transport · Connection Span (legacy) */
/* Dark: the vivid accent stays for marks; fill, ink and line become one tint that reads on the dark
   surfaces, with dark text on the fill. These out-rank the light rows inside a [data-app] subtree. */
[data-theme="dark"], [data-theme="dark"][data-app="helm"], [data-theme="dark"] [data-app="helm"] {--accent:#282A71;--accent-fill:#7A85D5;--accent-fill-hover:#8C98E9;--on-accent:#0E1326;--accent-ink:#7A85D5;--accent-line:#7A85D5;--accent-soft:#191F3E;--accent-100:#1B2044;}
[data-theme="dark"][data-app="datum"], [data-theme="dark"] [data-app="datum"] {--accent:#5B5FCF;--accent-fill:#7D85F9;--accent-fill-hover:#8E98FF;--on-accent:#0E1326;--accent-ink:#7D85F9;--accent-line:#7D85F9;--accent-soft:#21274C;--accent-100:#282E5B;}
[data-theme="dark"][data-app="place"], [data-theme="dark"] [data-app="place"] {--accent:#2E7DB8;--accent-fill:#4C99D6;--accent-fill-hover:#5FACEA;--on-accent:#0E1326;--accent-ink:#4C99D6;--accent-line:#4C99D6;--accent-soft:#1C2C49;--accent-100:#1F3555;}
[data-theme="dark"][data-app="anchor"], [data-theme="dark"] [data-app="anchor"] {--accent:#5B6B7B;--accent-fill:#8192A3;--accent-fill-hover:#93A4B6;--on-accent:#0E1326;--accent-ink:#8192A3;--accent-line:#8192A3;--accent-soft:#21293F;--accent-100:#283146;}
[data-theme="dark"][data-app="wake"], [data-theme="dark"] [data-app="wake"] {--accent:#1F7A8C;--accent-fill:#489DAF;--accent-fill-hover:#5CB0C2;--on-accent:#0E1326;--accent-ink:#489DAF;--accent-line:#489DAF;--accent-soft:#1A2C42;--accent-100:#1C344B;}
[data-theme="dark"][data-app="sonar"], [data-theme="dark"] [data-app="sonar"] {--accent:#1497A6;--accent-fill:#2CA4B3;--accent-fill-hover:#45B7C6;--on-accent:#0E1326;--accent-ink:#2CA4B3;--accent-line:#2CA4B3;--accent-soft:#1B3046;--accent-100:#1E3C51;}
[data-theme="dark"][data-app="chart"], [data-theme="dark"] [data-app="chart"] {--accent:#E08A3C;--accent-fill:#E08A3C;--accent-fill-hover:#F59D51;--on-accent:#0E1326;--accent-ink:#E08A3C;--accent-line:#E08A3C;--accent-soft:#36303B;--accent-100:#493B3E;}
[data-theme="dark"][data-app="atlas"], [data-theme="dark"] [data-app="atlas"] {--accent:#1F9C9C;--accent-fill:#2FA6A6;--accent-fill-hover:#47B9B9;--on-accent:#0E1326;--accent-ink:#2FA6A6;--accent-line:#2FA6A6;--accent-soft:#1C3145;--accent-100:#1F3D4F;}
[data-theme="dark"][data-app="range"], [data-theme="dark"] [data-app="range"] {--accent:#BC5A93;--accent-fill:#D672AB;--accent-fill-hover:#EB85BE;--on-accent:#0E1326;--accent-ink:#D672AB;--accent-line:#D672AB;--accent-soft:#322843;--accent-100:#422E4C;}
[data-theme="dark"][data-app="compass"], [data-theme="dark"] [data-app="compass"] {--accent:#56BE8B;--accent-fill:#56BE8B;--accent-fill-hover:#6AD19D;--on-accent:#0E1326;--accent-ink:#56BE8B;--accent-line:#56BE8B;--accent-soft:#213643;--accent-100:#27454C;}
[data-theme="dark"][data-app="fleet"], [data-theme="dark"] [data-app="fleet"] {--accent:#2F6FED;--accent-fill:#4D90FF;--accent-fill-hover:#5FA3FF;--on-accent:#0E1326;--accent-ink:#4D90FF;--accent-line:#4D90FF;--accent-soft:#1C2A51;--accent-100:#1F3262;}
[data-theme="dark"][data-app="wave"], [data-theme="dark"] [data-app="wave"] {--accent:#21A8C4;--accent-fill:#21A8C4;--accent-fill-hover:#3EBBD8;--on-accent:#0E1326;--accent-ink:#21A8C4;--accent-line:#21A8C4;--accent-soft:#1D324B;--accent-100:#203F58;}
[data-theme="dark"][data-app="port"], [data-theme="dark"] [data-app="port"] {--accent:#4A5DE8;--accent-fill:#6D88FF;--accent-fill-hover:#7E9BFF;--on-accent:#0E1326;--accent-ink:#6D88FF;--accent-line:#6D88FF;--accent-soft:#1E2750;--accent-100:#232E61;}
[data-theme="dark"][data-app="cargo"], [data-theme="dark"] [data-app="cargo"] {--accent:#C77F33;--accent-fill:#D0873C;--accent-fill-hover:#E49A50;--on-accent:#0E1326;--accent-ink:#D0873C;--accent-line:#D0873C;--accent-soft:#322E39;--accent-100:#43383B;}
[data-theme="dark"][data-app="beacon"], [data-theme="dark"] [data-app="beacon"] {--accent:#E86A5C;--accent-fill:#EF7062;--accent-fill-hover:#FF8374;--on-accent:#0E1326;--accent-ink:#EF7062;--accent-line:#EF7062;--accent-soft:#392B3D;--accent-100:#4C3442;}
[data-theme="dark"][data-app="harbor"], [data-theme="dark"] [data-app="harbor"] {--accent:#0E9F6E;--accent-fill:#25AA78;--accent-fill-hover:#40BD8A;--on-accent:#0E1326;--accent-ink:#25AA78;--accent-line:#25AA78;--accent-soft:#1B323E;--accent-100:#1D3E45;}
[data-theme="dark"][data-app="deck"], [data-theme="dark"] [data-app="deck"] {--accent:#8A4FBF;--accent-fill:#B176E9;--accent-fill-hover:#C489FE;--on-accent:#0E1326;--accent-ink:#B176E9;--accent-line:#B176E9;--accent-soft:#2A254A;--accent-100:#352A57;}
[data-theme="dark"][data-app="care"], [data-theme="dark"] [data-app="care"] {--accent:#AD4A57;--accent-fill:#D9717C;--accent-fill-hover:#EE848E;--on-accent:#0E1326;--accent-ink:#D9717C;--accent-line:#D9717C;--accent-soft:#30263A;--accent-100:#3E2B3E;}
[data-theme="dark"][data-app="almanac"], [data-theme="dark"] [data-app="almanac"] {--accent:#7A6418;--accent-fill:#A48E47;--accent-fill-hover:#B7A05A;--on-accent:#0E1326;--accent-ink:#A48E47;--accent-line:#A48E47;--accent-soft:#262934;--accent-100:#2F3034;}
[data-theme="dark"][data-app="haven"], [data-theme="dark"] [data-app="haven"] {--accent:#3D6A3A;--accent-fill:#6C9B68;--accent-fill-hover:#7EAE7A;--on-accent:#0E1326;--accent-ink:#6C9B68;--accent-line:#6C9B68;--accent-soft:#1C2A36;--accent-100:#203138;}
[data-theme="dark"][data-app="waypoint"], [data-theme="dark"] [data-app="waypoint"] {--accent:#607089;--accent-fill:#8292AD;--accent-fill-hover:#94A4C0;--on-accent:#0E1326;--accent-ink:#8292AD;--accent-line:#8292AD;--accent-soft:#222A42;--accent-100:#29324A;}
[data-theme="dark"][data-app="channel"], [data-theme="dark"] [data-app="channel"] {--accent:#2E8FB0;--accent-fill:#42A0C1;--accent-fill-hover:#57B3D5;--on-accent:#0E1326;--accent-ink:#42A0C1;--accent-line:#42A0C1;--accent-soft:#1D2F48;--accent-100:#203953;}
[data-theme="dark"][data-app="bridge"], [data-theme="dark"] [data-app="bridge"] {--accent:#4A6FA5;--accent-fill:#6C93CB;--accent-fill-hover:#7EA6DF;--on-accent:#0E1326;--accent-ink:#6C93CB;--accent-line:#6C93CB;--accent-soft:#1F2A46;--accent-100:#243151;}
/* END GENERATED: per-app accents */

/* ============================================================
   5 · SURFACE density                         [HELM addition]
   ------------------------------------------------------------
   Maps the three surface archetypes to density tokens. Components
   should size off --control-h / --row-h / --gutter / --fs-base
   rather than hard-coding, so one attribute reflows the whole
   surface. Default (no attribute) == workspace/comfortable.
   ============================================================ */
[data-surface="ops"]       { --control-h:32px; --row-h:34px; --gutter:var(--space-3); --fs-base:var(--fs-sm); }  /* dense, desktop, power users */
[data-surface="workspace"] { --control-h:40px; --row-h:48px; --gutter:var(--space-4); --fs-base:var(--fs-md); }  /* comfortable, desktop + tablet */
[data-surface="consumer"]  { --control-h:48px; --row-h:56px; --gutter:var(--space-5); --fs-base:var(--fs-md); }  /* spacious, touch-first */

/* ============================================================
   6 · Global guards                           [HELM addition]
   ============================================================ */
/* Predictable box model: width/height include padding + border, so a
   width:100% control with padding never overflows its container. */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; }
}