/* Skylane design tokens: the single source for the customer site (web/) and the ops console.
   Served at /tokens.css and imported FIRST by both apps. Spec: docs/reviews/2026-10-11-design-audit.md §3.2.
   Change a value here, not in an app stylesheet. App-level aliases (e.g. --brand, --line) map onto these. */
:root {
  /* ---------- colour: brand ---------- */
  --brand-50: #eef5fa;
  --brand-100: #e6f0f6;
  --brand-200: #b9d3e4;
  --brand-500: #1673a8;
  --brand-600: #0b5c8a; /* primary · 7.2:1 with white */
  --brand-700: #084a70;
  --brand-900: #06344f;

  /* ---------- colour: neutral ---------- */
  --neutral-0: #ffffff;
  --neutral-25: #f8fafb;
  --neutral-50: #f4f6f8;  /* page */
  --neutral-100: #eef1f4;
  --neutral-200: #dde3e9; /* line */
  --neutral-300: #c9d2db; /* input border */
  --neutral-500: #5b6b7a; /* muted text · 5.0:1 on page */
  --neutral-700: #2c3a47;
  --neutral-900: #14202b; /* ink */

  /* ---------- colour: semantic (fg / bg / border; every fg/bg pair ≥ 4.5:1) ---------- */
  --success-fg: #1c7a4b; --success-bg: #e5f4ec; --success-border: #bfe3cf; /* 4.7:1 */
  --warning-fg: #8a5a00; --warning-bg: #fdf3dc; --warning-border: #f1dfae; /* 5.4:1 */
  --danger-fg: #b3261e;  --danger-bg: #fbeae8;  --danger-border: #f1c9c5;  /* 5.6:1 */
  --info-fg: var(--brand-600); --info-bg: var(--brand-100); --info-border: var(--brand-200);
  /* Solid fills for buttons, field-error borders and 3 px status bars. */
  --danger-600: #b3261e;
  --danger-100: #fbeae8;
  --warning-600: #8a5a00;
  --success-600: #1c7a4b;

  /* ---------- focus (WCAG 2.4.7 / 2.4.11): never a soft-colour-only ring ---------- */
  --focus: 2px solid var(--brand-600);
  --focus-offset: 2px;

  /* ---------- type: system stack, tabular numbers for money, times and IDs ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 12px;   --t-xs-lh: 16px;   /* captions, table headers (uppercase, .03em) */
  --t-sm: 13px;   --t-sm-lh: 18px;   /* console secondary text */
  --t-md: 14px;   --t-md-lh: 20px;   /* console body */
  --t-base: 16px; --t-base-lh: 24px; /* customer body */
  --t-lg: 18px;   --t-lg-lh: 26px;   /* card titles */
  --t-xl: 20px;   --t-xl-lh: 28px;   /* section headings */
  --t-2xl: 24px;  --t-2xl-lh: 32px;  /* page titles */
  --t-3xl: 32px;  --t-3xl-lh: 40px;  /* hero, prices on confirmation */
  /* Weights 400 / 500 / 600 / 700 only. */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* ---------- spacing: 4-pt scale ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  /* Card padding: 16 console, 20 customer. Page gutter: 16 mobile, 24 desktop. */

  /* ---------- radius ---------- */
  --r-sm: 6px;    /* inputs, tags */
  --r-md: 8px;    /* buttons, console cards */
  --r-lg: 12px;   /* customer cards, sheets */
  --r-pill: 999px;

  /* ---------- elevation ---------- */
  --e-1: 0 1px 2px rgba(20, 32, 43, .06);   /* card */
  --e-2: 0 4px 16px rgba(20, 32, 43, .10);  /* popover */
  --e-3: 0 10px 30px rgba(20, 32, 43, .14); /* sheet, dialog */

  /* ---------- motion (apps must honour prefers-reduced-motion) ---------- */
  --m-fast: 120ms;  /* hover, press */
  --m-sheet: 200ms; /* sheets, dialogs */
  --m-ease: ease-out;

  /* ---------- breakpoints (reference only; CSS vars cannot be used in @media) ----------
     400 / 720 / 960 / 1200 */
}

/* ---------- StatusPill: the one shared status-to-tone map (both apps) ----------
   Labels are humanised, never raw enums.
   success : CONFIRMED · CAPTURED · ACTIVE · SUCCEEDED · COMPLETED · RESOLVED · ACCEPTED
   info    : PAID · TICKETING · PAYMENT_PENDING · PROCESSING · REQUESTED · OPEN · SELECTED
   warning : REVIEW · PRICE_CHANGED · AWAITING_APPROVAL · PARTIALLY_CANCELLED · PENDING_CUSTOMER · AWAITING_PAYMENT
   danger  : FAILED · TICKETING_FAILED · PAYMENT_FAILED · UNAVAILABLE · REJECTED
   neutral : CANCELLED · EXPIRED · REFUNDED · CLOSED · QUOTED · CHANGED_OUT
   Tone classes map to the semantic tokens: fg on bg, border optional. */