/* POS 101 — shared light palette. Surfaces occupy most space; accents are reserved for actions. */
:root {
  color-scheme: light;
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f1f5f9;
  --ui-surface-hover: #e8eef5;
  --ui-text: #1e293b;
  --ui-text-secondary: #475569;
  --ui-text-muted: #475569;
  --ui-border: #d8e0e9;
  --ui-control-border: #64748b;
  --ui-primary: #2556a8;
  --ui-primary-hover: #1e4382;
  --ui-primary-soft: #e8effa;
  --ui-on-primary: #ffffff;
  --ui-focus: #1d4ed8;
  --ui-header: #172033;
  --ui-on-header: #f8fafc;
  --ui-header-muted: #cbd5e1;
  --ui-success: #166448;
  --ui-success-soft: #e8f3ed;
  --ui-warning: #805400;
  --ui-warning-soft: #fff3d6;
  --ui-error: #a12d43;
  --ui-error-soft: #faeaf0;
  --ui-info: #24588c;
  --ui-info-soft: #eaf1fa;
  --ui-disabled-bg: #e8edf3;
  --ui-disabled-text: #475569;
  --ui-backdrop: rgb(15 23 42 / 45%);
  --ui-shadow: 0 6px 22px rgb(15 23 42 / 8%);
  --ui-shadow-dialog: 0 16px 48px rgb(15 23 42 / 18%);
  --ui-radius: 10px;
  --ui-radius-small: 6px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-touch: 44px;
  --ui-font-control: 16px;
  --ui-icon: 20px;
  --ui-focus-width: 2px;
  --ui-focus-offset: 2px;
}