/* mauritz-ui — tokens: the ONE file a project customises.
   Every colour, font and size the kit uses comes from a --ui-* variable below.
   A project either edits a copy of this file, or keeps it and loads its own
   overrides after it, e.g. mapping onto existing brand tokens:
     :root{ --ui-accent: var(--brand); --ui-font: var(--font); }
   Light on bare :root; dark follows the OS unless <html data-theme="light">,
   and <html data-theme="dark"> forces it (same contract as Explora's kits).
   The dark selectors are wrapped in :where() so they weigh no more than a plain
   :root — a project's own `:root{--ui-…}` mapping, loaded after, always wins.
   Load order (a contract): tokens → [project overrides] → responsive.css → project CSS. */
:root{
  /* colour */
  --ui-bg:#f7f7f8;          /* page ground */
  --ui-surface:#ffffff;     /* cards, drawer, sheet, popovers */
  --ui-ink:#1b1d22;         /* body text */
  --ui-muted:#686d78;       /* secondary text, stacked-table labels */
  --ui-border:#e2e4e9;
  --ui-accent:#3a5bd9;      /* links, focus ring, primary button */
  --ui-accent-ink:#ffffff;  /* text on --ui-accent */
  --ui-bar-bg:#16181d;      /* phone top bar + app drawer */
  --ui-bar-ink:#f1f2f4;
  --ui-bar-muted:#9a9fab;
  --ui-scrim:rgba(10,12,16,.5);
  --ui-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -14px rgba(0,0,0,.25);

  /* type */
  --ui-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ui-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* shape and spacing */
  --ui-radius:14px;
  --ui-radius-sm:9px;
  --ui-gutter:24px;          /* page side padding, wide screens */
  --ui-gutter-phone:16px;    /* … and on phones */
  --ui-maxw:1180px;          /* .ui-wrap width */
  --ui-col-min:16rem;        /* narrowest card in a .ui-grid */
  --ui-tap:44px;             /* minimum touch target */
  --ui-drawer-w:min(20rem,86vw);
  --ui-bar-h:56px;           /* phone top bar height */
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    color-scheme:dark;
    --ui-bg:#0f1115; --ui-surface:#181b21; --ui-ink:#eceef2; --ui-muted:#9aa0ac;
    --ui-border:#2a2e37; --ui-accent:#8ea6ff; --ui-accent-ink:#0f1115;
    --ui-shadow:0 1px 1px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7);
  }
}
:root:where([data-theme="dark"]){
  color-scheme:dark;
  --ui-bg:#0f1115; --ui-surface:#181b21; --ui-ink:#eceef2; --ui-muted:#9aa0ac;
  --ui-border:#2a2e37; --ui-accent:#8ea6ff; --ui-accent-ink:#0f1115;
  --ui-shadow:0 1px 1px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7);
}