/* Design tokens, lifted from the Sultan POS build so the two products read as
   one family. Values are copied verbatim rather than re-picked -- a booking
   screen sitting next to a POS screen must not be a near-miss on colour.

   Light only, deliberately: this lives inside admin, which has no dark mode,
   and a half-supported dark theme is worse than none. */

:root {
  /* surfaces */
  --white: #FFFFFF;
  --bg-app: #F4F6FA;
  --bg-subtle: #F0F3F8;
  --bg-faint: #F7F9FC;
  --bg-faintest: #FBFCFE;
  --ink: #1B2537;
  --ink-dark: #0B1220;

  /* text ramp -- seven steps, because a grid needs more greys than a form */
  --text-primary: #1B2537;
  --text-secondary: #3C4A5F;
  --text-muted: #6B7A90;
  --text-label: #8494AA;
  --text-strong-muted: #4A5B72;
  --text-disabled: #94A3B6;
  --text-ghost: #C9D3E2;

  /* borders */
  --border-input: #D6DEEA;
  --border-divider: #E9EDF4;
  --border-soft: #E3E8F0;
  --border-hairline: #F0F3F8;

  /* blue -- brand + the rail */
  --blue-600: #2563EB;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-rail-btn: #1B3480;
  --blue-rail-border: #3055B5;
  --blue-nav-idle: #C7D7F5;
  --blue-rail-sub: #A6C0EE;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-50: #EFF6FF;
  --blue-tint: #F5F9FF;
  --blue-mid: #93B4F5;
  --blue-pending: #84A9F0;

  /* green -- confirmed, paid, free */
  --green-fg: #0B5C33;
  --green-bg: #E7F6EE;
  --green-border: #A9DCC1;
  --green-solid: #0F7B44;

  /* red -- cancelled, conflict, destructive */
  --red-fg: #8E2019;
  --red-bg: #FEECEA;
  --red-border: #F5C7C1;
  --red-solid: #B42318;
  --red-border-2: #EFC7C2;
  --red-input: #D9564C;
  --red-deep: #C0392B;

  /* amber -- waitlist, pending, warnings */
  --amber-bg: #FFF8E6;
  --amber-border: #F2E0AE;
  --amber-fg: #8A6A08;
  --amber-fg-deep: #5C4708;
  --amber-tint: #FFFBF0;
  --amber-alt: #6B5410;
  --amber-icon: #B25E09;
  --amber-panel-bg: #FEF6ED;
  --amber-panel-border: #F2D5B3;
  --amber-panel-fg: #7A3E05;
  --amber-panel-body: #8A5A20;

  /* neutral chips */
  --chip-bg: #EEF1F6;
  --chip-fg-a: #4A5B72;
  --chip-fg-b: #6B7A90;

  /* elevation */
  --shadow-drop: 0 12px 30px rgba(9, 17, 32, .16);
  --shadow-card: 0 1px 3px rgba(16, 32, 64, .08);
  --shadow-modal: 0 18px 48px rgba(9, 17, 32, .34);
  --shadow-modal-deep: 0 28px 70px rgba(9, 17, 32, .42);
  --shadow-drawer: -18px 0 44px rgba(9, 17, 32, .18);

  /* type. The mono face is for FIGURES -- times, money, counts -- so columns
     of numbers line up and a 1 cannot be read as a 7. */
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  /* radii */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* spacing step -- everything is a multiple, so nothing is 7px by accident */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* the calendar's one magic number: how tall a minute is. Every booking
     block, every gridline and every drag calculation derives from it, so it
     lives here rather than being repeated in JS and CSS.

     DOUBLED FOR THE 15-MINUTE GRID (r52), from 1.4. The day's height is
     (close - open) x this, so leaving it at 1.4 would have kept the day the
     same height and halved every row to 21px -- a denser calendar, which is
     the opposite of what was asked for. At 2.8 a 15-minute row is 42px,
     exactly the height a 30-minute row used to be, and a 09:00-21:00 day is
     twice as tall: same readability, more scrolling. */
  --px-per-min: 2.8px;
  --rail-w: 236px;
  --rail-w-collapsed: 76px;
  --col-min-w: 148px;
  --time-gutter-w: 62px;
}