/* hankelsner.tech shared UI tokens — light default, dark via [data-theme], trust-blue accent.
   Adopt in any app: link this file, then build components against the var(--*) tokens.
   Theme switch: set document.documentElement.dataset.theme = 'light'|'dark' (persist in localStorage). */
/* ============================================================
   hankelsner.tech UI — shared corporate design system
   Light default · dark via [data-theme] · trust-blue accent
   ============================================================ */
:root{
  --bg:#eef2f7; --surface:#ffffff; --surface-2:#f3f6fa; --inset:#eaf0f6;
  --line:#dbe3ec; --line-2:#c8d3df;
  --ink:#16202e; --ink-2:#3c4a5b; --dim:#6a7889;
  --accent:#1f5fa8; --accent-2:#2f76c4; --accent-ink:#ffffff; --accent-soft:#e7f0fb;
  --ok:#1f8a5b; --ok-soft:#e2f3ea; --warn:#c0492f; --warn-soft:#fbe9e4;
  --shadow:0 1px 2px rgba(20,35,55,.06), 0 6px 20px rgba(20,35,55,.06);
  --shadow-lg:0 8px 30px rgba(20,35,55,.14);
  --r:14px; --r-sm:10px; --r-pill:999px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1620; --surface:#16202c; --surface-2:#1a2632; --inset:#101a24;
  --line:#26333f; --line-2:#33424f;
  --ink:#e9eef4; --ink-2:#c2cdd9; --dim:#8595a4;
  --accent:#4f9be6; --accent-2:#68abed; --accent-ink:#08131f; --accent-soft:#14263a;
  --ok:#43b483; --ok-soft:#123024; --warn:#e0705a; --warn-soft:#331813;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.34);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}}
:root[data-theme="light"]{
  --bg:#eef2f7; --surface:#ffffff; --surface-2:#f3f6fa; --inset:#eaf0f6;
  --line:#dbe3ec; --line-2:#c8d3df; --ink:#16202e; --ink-2:#3c4a5b; --dim:#6a7889;
  --accent:#1f5fa8; --accent-2:#2f76c4; --accent-ink:#ffffff; --accent-soft:#e7f0fb;
  --ok:#1f8a5b; --ok-soft:#e2f3ea; --warn:#c0492f; --warn-soft:#fbe9e4;
  --shadow:0 1px 2px rgba(20,35,55,.06), 0 6px 20px rgba(20,35,55,.06);
  --shadow-lg:0 8px 30px rgba(20,35,55,.14);
}
:root[data-theme="dark"]{
  --bg:#0f1620; --surface:#16202c; --surface-2:#1a2632; --inset:#101a24;
  --line:#26333f; --line-2:#33424f; --ink:#e9eef4; --ink-2:#c2cdd9; --dim:#8595a4;
  --accent:#4f9be6; --accent-2:#68abed; --accent-ink:#08131f; --accent-soft:#14263a;
  --ok:#43b483; --ok-soft:#123024; --warn:#e0705a; --warn-soft:#331813;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.34);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}