/* Booking Tower design tokens. Values come from the canvas designs. */
:root {
  /* Brand */
  --red: #D2311D;
  --red-strong: #B8291A;
  --red-deep: #8F1F12;
  --red-soft: #FDECEA;
  --navy: #164B94;
  --navy-strong: #0F3570;
  --navy-soft: #EAF0F8;

  /* Neutrals */
  --ink: #121826;
  --ink-2: #3A4050;
  --muted: #5B6170;
  --muted-2: #8A90A0;
  --line: #E4E6EB;
  --line-strong: #DADDE3;
  --line-soft: #EEF0F3;
  --bg: #FFFFFF;
  --bg-page: #F6F7F9;
  --bg-sunken: #F2F3F5;
  --bg-head: #F9FAFB;
  --switch-off: #C9CDD5;
  --dark: #121826;
  --dark-2: #1C2333;
  --dark-3: #24304A;
  --dark-line: #2C3446;
  --dark-text: #D9DCE3;
  --dark-muted: #B9BEC9;

  /* Status */
  --ok-bg: #E9F7EF;   --ok: #0B6B3A;
  --warn-bg: #FFF4E0; --warn: #8A5300;
  --info-bg: #EAF0F8; --info: #164B94;
  --bad-bg: #FDECEA;  --bad: #B8291A;
  --grey-bg: #F2F3F5; --grey: #5B6170;
  --gold: #FFC94D;

  /* Accent (themes override) */
  --accent: var(--red);
  --accent-strong: var(--red-strong);
  --accent-soft: var(--red-soft);
  --on-accent: #FFFFFF;
  --link: var(--red-strong);

  /* Type */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --lh-tight: 1.2;
  --lh: 1.5;

  /* Space (4px grid) */
  --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-14: 56px;

  /* Radii */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(18, 24, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(18, 24, 38, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 24, 38, 0.18);

  /* Sizes */
  --touch: 44px;
  --container: 1280px;
  --header-h: 76px;
  --sidebar-w: 256px;
  --focus: 0 0 0 3px rgba(22, 75, 148, 0.35);
}

.theme-customer {
  --accent: var(--red);
  --accent-strong: var(--red-strong);
  --accent-soft: var(--red-soft);
  --link: var(--red-strong);
  --focus: 0 0 0 3px rgba(210, 49, 29, 0.32);
}

.theme-business,
.theme-admin {
  --accent: var(--navy);
  --accent-strong: var(--navy-strong);
  --accent-soft: var(--navy-soft);
  --link: var(--navy);
  --focus: 0 0 0 3px rgba(22, 75, 148, 0.35);
}