/* Webbership POS design tokens — Webbership suite palette (warm paper + Wallet Teal).
   Light by default; dark follows the device unless html[data-theme] overrides it.
   Plain CSS custom properties (Safari 9.1+), no light-dark() so old iPads work. */

/* The design system's fonts, served by the app (static/fonts/README.md): woff2 for Safari 10+
   and woff for the legacy profile (iOS 9 Safari reads woff, not woff2). Only the weights the
   CSS uses: Mulish 400 (body) to 800, Barlow Condensed 600 and 700 (display). A browser that
   ignores font-display (before Safari 11.1) still draws the system stack until they load. */
@font-face { font-family: Mulish; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/mulish-400.woff2") format("woff2"), url("/static/fonts/mulish-400.woff") format("woff"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/mulish-500.woff2") format("woff2"), url("/static/fonts/mulish-500.woff") format("woff"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/mulish-600.woff2") format("woff2"), url("/static/fonts/mulish-600.woff") format("woff"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/mulish-700.woff2") format("woff2"), url("/static/fonts/mulish-700.woff") format("woff"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/mulish-800.woff2") format("woff2"), url("/static/fonts/mulish-800.woff") format("woff"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2"), url("/static/fonts/barlow-condensed-600.woff") format("woff"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2"), url("/static/fonts/barlow-condensed-700.woff") format("woff"); }

:root {
  --w-ground: #f3efea;
  --w-surface: #fdfaf6;
  --w-inset: #f7f3ee;
  --w-ink: #1a1714;
  --w-ink-muted: #59554f;
  --w-ink-faint: #66615a;
  --w-hairline: #e4dfd8;
  --w-hairline-strong: #d3cdc5;
  --w-accent: #376d74;        /* Wallet Teal Deep: buttons, selection, focus */
  --w-accent-press: #2c646c;
  --w-accent-wash: #e6f2f3;
  --w-on-accent: #ffffff;
  --w-strip: #1c1916;         /* top bar / nav, dark in both themes */
  --w-strip-ink: #f3efea;
  --w-live: #3fb46f;
  --w-warn: #e6a23c;
  --w-fault: #e0483e;
  --w-offline: #8f887e;
  --w-strip-ink-muted: #aaa49b; /* secondary text on the strip */
  --w-strip-raised: #2a2622;    /* a control raised on the strip */
  --w-touch: 48px;
  --w-touch-min: 44px;          /* the smallest tap target (44 pt) */
  --w-font: Mulish, system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-font-display: "Barlow Condensed", Mulish, system-ui, sans-serif;

  /* Scales. Each step is a value the screens already use; snapping them closer together is a
     separate, visible change. Gutters paired with a negative margin stay literal in the rules. */
  --w-space-3xs: 2px;
  --w-space-2xs: 4px;
  --w-space-xs: 6px;
  --w-space-sm: 8px;
  --w-space-md: 12px;
  --w-space-lg: 16px;
  --w-space-xl: 20px;
  --w-space-2xl: 24px;
  --w-space-3xl: 32px;
  --w-space-4xl: 48px;
  --w-pad-inset: var(--w-space-lg); /* the panel inset: panels, tables, lists and buttons move together */
  --w-text-2xs: 12px;
  --w-text-xs: 13px;
  --w-text-sm: 14px;
  --w-text-md: 15px;            /* body */
  --w-text-input: 16px;         /* inputs and buttons: below 16px iOS zooms on focus */
  --w-text-lg: 18px;
  --w-text-xl: 20px;
  --w-text-2xl: 24px;
  --w-text-3xl: 28px;
  --w-text-display: 34px;
  --w-weight-medium: 500;
  --w-weight-semibold: 600;
  --w-weight-bold: 700;
  --w-weight-heavy: 800;
  --w-leading-tight: 1.1;
  --w-leading-snug: 1.25;
  --w-leading-body: 1.45;
  --w-radius-sm: 8px;
  --w-radius: 10px;
  --w-radius-lg: 14px;
  --w-radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --w-ground: #12100e; --w-surface: #1b1916; --w-inset: #221f1b;
    --w-ink: #f3efea; --w-ink-muted: #b9b2a8; --w-ink-faint: #8f887e;
    --w-hairline: #2c2824; --w-hairline-strong: #3a352f; --w-accent-wash: #1d2a2c;
  }
}
:root[data-theme="dark"] {
  --w-ground: #12100e; --w-surface: #1b1916; --w-inset: #221f1b;
  --w-ink: #f3efea; --w-ink-muted: #b9b2a8; --w-ink-faint: #8f887e;
  --w-hairline: #2c2824; --w-hairline-strong: #3a352f; --w-accent-wash: #1d2a2c;
}