/* ═══════════════════════════════════════════════════════════════════
   tokens.css, canonical Sunwave design palette (single source of truth).

   Mirrors the :root block that currently also lives in admin.css. Load this
   FIRST (before every other stylesheet) so future per-tab sheets can rely on
   these custom properties existing. For now it is purely additive: admin.css
   still declares the same values, so behavior is unchanged. The CSS-split
   phase (#4) will migrate the per-tab sheets to reference these and remove the
   duplicate :root from admin.css. Keep values in sync with admin.css until then.
   See INTERFACE_DESIGN_PHILOSOPHY_NEW.md / PAGE_LAYOUT_STANDARD.md.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Warm canvas + cards. */
  --sw-canvas: #F8F5EF;
  --sw-card: #FCFAF6;
  --sw-card-lift: #FFFDF9;
  /* --sw-inset retired 2026-06-13: the warm tan (#F3EFE7) read as brown and is
     banned. Quiet/recessed surfaces use --sw-card-lift + a hairline border. */
  --sw-border: #E5DED3;
  --sw-shadow: rgba(55, 59, 77, 0.08);
  /* Focus drop-shadow for inputs/boxes: a soft orange lift with no hard edge.
     Single source of truth, change this one value to restyle focus app-wide. */
  --sw-focus-shadow: 0 0 0 1px var(--sw-orange), 0 6px 13px rgba(243, 138, 63, 0.30);
  /* Text-selection wash for type-in boxes: a warm, on-brand highlight so a
     selected value reads as part of the field, not the browser's stray cold-blue
     rectangle. Single source of truth for the app's input selection look. */
  --sw-selection: rgba(243, 138, 63, 0.28);

  /* Ink + brand colors. */
  --sw-ink: #373B4D;
  --sw-ink-deep: #373B4D;
  --sw-muted: #7B8190;
  --sw-orange: #F39A63;
  --sw-orange-soft: #FFEEDC;
  --sw-orange-dark: #C66518;
  --sw-blue: #BFE0F3;
  --sw-green: #61AD89;
  /* "Settled / accepted" green family, deeper than sage --sw-green, for the
     estimate-approval audit card and the accepted-option highlight. */
  --sw-ok-ink: #2E7D49;
  --sw-ok-soft: #F1F8F2;
  --sw-ok-border: #BFE3CB;
  --sw-gold: #D39A2E;
  --sw-coral: #D65F4F;
  --sw-coral-wash: #FCEBE7;

  /* Aggressive radii for the squircle look. */
  --sw-radius-card: 24px;
  --sw-radius-pill: 999px;
  --sw-radius-input: 14px;
}

/* ── Text selection inside type-in boxes ────────────────────────────────────
   A selected value gets the warm --sw-selection wash instead of the browser's
   default cold-blue rectangle, which floated inside a wide, right-aligned field
   like a stray "inner square" disconnected from the field. Scoped to
   inputs/textareas so body text keeps native selection. Loaded first (here in
   tokens.css) so it applies app-wide; change --sw-selection to restyle it once.
   See INTERFACE_DESIGN_PHILOSOPHY_NEW.md -> "Text selection in fields". */
input::selection,
textarea::selection { background: var(--sw-selection); color: var(--sw-ink-deep, #373B4D); }
input::-moz-selection,
textarea::-moz-selection { background: var(--sw-selection); color: var(--sw-ink-deep, #373B4D); }

/* ── iOS focus-zoom guard (app-wide base) ──────────────────────────────────
   iOS Safari auto-zooms the page the instant a focused <input>/<textarea>/
   <select> has font-size < 16px. In our single-page shells (/admin, /tech)
   that zoom STICKS after you navigate, leaving the app zoomed-in and scrolling
   side-to-side (e.g. tap the Price Book search at 15.5px, go back to More →
   still zoomed). Floor every field at exactly 16px on phones so Safari never
   zooms, no field is intentionally larger, so this only ever raises a size.
   Lives in tokens.css because it loads on nearly every surface; the few pages
   that don't pull tokens.css (booking, auth, the inline-styled standalone
   pages) carry their own copy of this same rule. */
@media (max-width: 600px) {
  input, textarea, select { font-size: 16px !important; }
}