/* =====================================================================
   LET’S BOOK 4U — design tokens
   Bootstrap 5.3.8 is customised through its CSS custom properties only
   (no Bootstrap source changes). The LET’S BOOK 4U identity (name, symbol, wordmark) is final;
   the blue palette below is the approved LET’S BOOK 4U palette and is kept unchanged (DQ-01).
   Contrast notes are measured against white (#ffffff) unless stated.
   ===================================================================== */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Primitives (not used directly by components) ---------- */
  --rp-brand-50: #eef3ff;   /* LET’S BOOK 4U blue */
  --rp-brand-100: #dbe5ff;
  --rp-brand-200: #bccdfd;
  --rp-brand-600: #2352e0;
  --rp-brand-700: #1d45c4;  /* 7.0:1 on white — LET’S BOOK 4U primary (logo blue) */
  --rp-brand-800: #1a3a9f;  /* hover */
  --rp-brand-900: #172f7c;  /* active */
  --rp-accent-700: #0f766e; /* 5.5:1 — accent (teal) */

  --rp-slate-0: #ffffff;
  --rp-slate-25: #fbfcfd;
  --rp-slate-50: #f6f8fa;
  --rp-slate-100: #eef1f5;
  --rp-slate-200: #e2e7ee;  /* decorative borders only */
  --rp-slate-300: #cfd6e0;
  --rp-slate-400: #8190a5;  /* 3.25:1 — form control borders (WCAG 1.4.11) */
  --rp-slate-500: #64748b;
  --rp-slate-600: #475569;  /* 7.6:1 — muted text */
  --rp-slate-700: #334155;
  --rp-slate-800: #1e293b;
  --rp-slate-900: #0f172a;  /* 17.9:1 — body text */

  --rp-green-50: #ecfdf3;  --rp-green-200: #bbf2d0; --rp-green-700: #15803d; --rp-green-800: #166534;
  --rp-amber-50: #fffbeb;  --rp-amber-200: #fde8a4; --rp-amber-700: #b45309; --rp-amber-800: #92400e;
  --rp-red-50: #fef2f2;    --rp-red-200: #fcc9c9;   --rp-red-700: #b91c1c;   --rp-red-800: #991b1b;
  --rp-sky-50: #f0f8ff;    --rp-sky-200: #bfdcf5;   --rp-sky-700: #0369a1;   --rp-sky-800: #075985;

  /* ---------- Semantic tokens ---------- */
  --rp-primary: var(--rp-brand-700);
  --rp-primary-hover: var(--rp-brand-800);
  --rp-primary-active: var(--rp-brand-900);
  --rp-primary-subtle: var(--rp-brand-50);
  --rp-primary-subtle-border: var(--rp-brand-200);
  --rp-on-primary: #ffffff;
  --rp-accent: var(--rp-accent-700);

  --rp-bg: var(--rp-slate-50);          /* portal page background */
  --rp-bg-booking: var(--rp-slate-25);  /* booking page background */
  --rp-surface: var(--rp-slate-0);
  --rp-surface-muted: var(--rp-slate-50);
  --rp-surface-hover: var(--rp-slate-100);

  --rp-text: var(--rp-slate-900);
  --rp-text-muted: var(--rp-slate-600);
  --rp-text-subtle: var(--rp-slate-500); /* large/secondary meta only (4.8:1) */

  --rp-border: var(--rp-slate-200);
  --rp-border-strong: var(--rp-slate-300);
  --rp-control-border: var(--rp-slate-400);
  --rp-disabled-bg: var(--rp-slate-100);
  --rp-disabled-text: var(--rp-slate-500);

  --rp-success: var(--rp-green-700);   --rp-success-subtle: var(--rp-green-50);  --rp-success-border: var(--rp-green-200); --rp-success-emphasis: var(--rp-green-800);
  --rp-warning: var(--rp-amber-700);   --rp-warning-subtle: var(--rp-amber-50);  --rp-warning-border: var(--rp-amber-200); --rp-warning-emphasis: var(--rp-amber-800);
  --rp-danger: var(--rp-red-700);      --rp-danger-subtle: var(--rp-red-50);     --rp-danger-border: var(--rp-red-200);   --rp-danger-emphasis: var(--rp-red-800);
  --rp-info: var(--rp-sky-700);        --rp-info-subtle: var(--rp-sky-50);       --rp-info-border: var(--rp-sky-200);     --rp-info-emphasis: var(--rp-sky-800);
  --rp-neutral-subtle: var(--rp-slate-100); --rp-neutral-border: var(--rp-slate-300); --rp-neutral-emphasis: var(--rp-slate-700);

  /* Focus: 2px solid outline + 2px offset, ≥3:1 against white and brand surfaces */
  --rp-focus: var(--rp-brand-700);
  --rp-focus-width: 2px;
  --rp-focus-offset: 2px;

  /* ---------- Typography ---------- */
  --rp-font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Inter = DQ-02 placeholder */
  --rp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rp-fs-xs: 0.75rem;     /* 12 — never for essential info */
  --rp-fs-sm: 0.875rem;    /* 14 */
  --rp-fs-base: 1rem;      /* 16 — minimum body size */
  --rp-fs-md: 1.125rem;    /* 18 */
  --rp-fs-lg: 1.25rem;     /* 20 */
  --rp-fs-xl: 1.5rem;      /* 24 */
  --rp-fs-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);   /* 24 → 30 */
  --rp-fs-3xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);  /* 28 → 36 */
  --rp-fw-regular: 400;
  --rp-fw-medium: 500;
  --rp-fw-semibold: 600;
  --rp-fw-bold: 700;
  --rp-lh-tight: 1.25;
  --rp-lh-snug: 1.4;
  --rp-lh-base: 1.5;
  --rp-tracking-tight: -0.015em;

  /* ---------- Spacing (Bootstrap spacers 1–5 = 4/8/16/24/48, plus layout steps) ---------- */
  --rp-space-1: 0.25rem;
  --rp-space-2: 0.5rem;
  --rp-space-3: 0.75rem;
  --rp-space-4: 1rem;
  --rp-space-5: 1.5rem;
  --rp-space-6: 2rem;
  --rp-space-7: 3rem;
  --rp-space-8: 4rem;

  /* ---------- Shape & elevation ---------- */
  --rp-radius-sm: 0.375rem;
  --rp-radius: 0.5rem;
  --rp-radius-lg: 0.75rem;
  --rp-radius-xl: 1rem;
  --rp-radius-pill: 999px;
  --rp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --rp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --rp-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --rp-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* ---------- Sizing ---------- */
  --rp-control-h-sm: 2rem;       /* 32 */
  --rp-control-h: 2.75rem;       /* 44 — comfortable touch target */
  --rp-control-h-lg: 3rem;       /* 48 */
  --rp-target-min: 24px;         /* WCAG 2.5.8 minimum */
  --rp-target-touch: 44px;       /* recommended on touch layouts */
  --rp-icon-sm: 1rem;
  --rp-icon: 1.25rem;
  --rp-icon-lg: 1.5rem;
  --rp-container: 1180px;
  --rp-container-narrow: 760px;
  /* The public website runs wider than the portals: marketing pages carry side-by-side visuals,
     so they use more of a large screen. Portals and the booking flow keep --rp-container. */
  --rp-container-site: 1400px;
  --rp-sidebar-w: 16.5rem;
  --rp-header-h: 4rem;

  /* ---------- Motion ---------- */
  --rp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --rp-dur-fast: 120ms;
  --rp-dur: 200ms;
  --rp-dur-slow: 320ms;

  /* ---------- Portal design layer (P7) ----------
     The inside of both portals speaks the same language as the redesigned sign-in screens: the
     brighter action blue, eyebrow labels, larger radii, soft layered shadows and tinted fields.
     Only used under `.rp-portal`; the public website, the booking pages and the sign-in screens
     keep their own rules. Contrast is listed against the surface each token is used on. */
  --rp-portal-bg: #f4f6fb;          /* page background — muted text 7.1:1, action blue 5.8:1 (never slate-500 text on it: 4.4:1) */
  --rp-field-bg: #f8fafd;           /* resting fill of a text field; white once focused. Control border on it: 3.1:1 */
  --rp-action: var(--rp-brand-600); /* primary actions + eyebrows, as on the sign-in screens — white on it 6.3:1 */
  --rp-action-hover: var(--rp-brand-700);
  --rp-action-active: var(--rp-brand-800);
  --rp-ink: #0a1534;                /* admin navy, the sign-in "control centre" panel */
  --rp-ink-raised: #111f47;         /* a raised surface on the navy */
  --rp-on-ink: #ffffff;             /* 18.0:1 on ink */
  --rp-on-ink-muted: #c3cde0;       /* 11.2:1 on ink */
  --rp-on-ink-accent: #a9c1ff;      /* 10.0:1 on ink — eyebrow, active icon */
  --rp-on-ink-subtle: #8e9bb8;      /* 6.4:1 on ink — section headings */
  --rp-tile-blue: #e4ecff;   --rp-tile-blue-ink: #2352e0;    /* icon tiles (KPI, entity cards) — ink 5.3:1 on tile */
  --rp-tile-green: #dcf5ef;  --rp-tile-green-ink: #0f766e;   /* 4.8:1 */
  --rp-tile-amber: #fdeec8;  --rp-tile-amber-ink: #92400e;   /* 6.2:1 */
  --rp-tile-violet: #ede9fe; --rp-tile-violet-ink: #5b21b6;  /* 7.6:1 */
  --rp-radius-card: 1rem;
  --rp-radius-control: 0.625rem;
  --rp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px -8px rgba(15, 23, 42, 0.08);
  --rp-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 32px -12px rgba(15, 23, 42, 0.18);
  --rp-shadow-action: 0 1px 2px rgba(29, 69, 196, 0.22), 0 4px 12px -4px rgba(35, 82, 224, 0.45);
  --rp-shadow-float: 0 4px 18px rgba(15, 23, 42, 0.08);       /* pills in the top bar, as on the sign-in screens */
  --rp-tracking-eyebrow: 0.18em;
  --rp-fs-page-title: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); /* 26 → 34 */
  --rp-topbar-bg: rgba(244, 246, 251, 0.86);
  --rp-sidebar-w-lg: 17rem;

  /* ---------- Bootstrap 5.3.8 variable overrides ---------- */
  --bs-font-sans-serif: var(--rp-font-sans);
  --bs-body-font-family: var(--rp-font-sans);
  --bs-body-font-size: var(--rp-fs-base);
  --bs-body-line-height: var(--rp-lh-base);
  --bs-body-color: var(--rp-text);
  --bs-body-color-rgb: 15, 23, 42;
  --bs-body-bg: var(--rp-surface);
  --bs-emphasis-color: var(--rp-slate-900);
  --bs-secondary-color: var(--rp-text-muted);
  --bs-secondary-bg: var(--rp-slate-100);
  --bs-tertiary-color: var(--rp-text-subtle);
  --bs-tertiary-bg: var(--rp-slate-50);
  --bs-heading-color: var(--rp-slate-900);
  --bs-primary: var(--rp-primary);
  --bs-primary-rgb: 29, 69, 196;
  --bs-primary-text-emphasis: var(--rp-brand-900);
  --bs-primary-bg-subtle: var(--rp-brand-50);
  --bs-primary-border-subtle: var(--rp-brand-200);
  --bs-success: var(--rp-success);
  --bs-success-rgb: 21, 128, 61;
  --bs-success-text-emphasis: var(--rp-success-emphasis);
  --bs-success-bg-subtle: var(--rp-success-subtle);
  --bs-success-border-subtle: var(--rp-success-border);
  --bs-danger: var(--rp-danger);
  --bs-danger-rgb: 185, 28, 28;
  --bs-danger-text-emphasis: var(--rp-danger-emphasis);
  --bs-danger-bg-subtle: var(--rp-danger-subtle);
  --bs-danger-border-subtle: var(--rp-danger-border);
  --bs-warning-text-emphasis: var(--rp-warning-emphasis);
  --bs-warning-bg-subtle: var(--rp-warning-subtle);
  --bs-warning-border-subtle: var(--rp-warning-border);
  --bs-info-text-emphasis: var(--rp-info-emphasis);
  --bs-info-bg-subtle: var(--rp-info-subtle);
  --bs-info-border-subtle: var(--rp-info-border);
  --bs-link-color: var(--rp-primary);
  --bs-link-color-rgb: 29, 69, 196;
  --bs-link-hover-color: var(--rp-primary-hover);
  --bs-link-hover-color-rgb: 26, 58, 159;
  --bs-border-color: var(--rp-border);
  --bs-border-color-translucent: rgba(15, 23, 42, 0.1);
  --bs-border-radius: var(--rp-radius);
  --bs-border-radius-sm: var(--rp-radius-sm);
  --bs-border-radius-lg: var(--rp-radius-lg);
  --bs-border-radius-xl: var(--rp-radius-xl);
  --bs-border-radius-pill: var(--rp-radius-pill);
  --bs-box-shadow: var(--rp-shadow-md);
  --bs-box-shadow-sm: var(--rp-shadow-sm);
  --bs-box-shadow-lg: var(--rp-shadow-lg);
  --bs-focus-ring-width: 0;          /* replaced by the outline-based focus style */
  --bs-focus-ring-color: transparent;
  --bs-form-invalid-color: var(--rp-danger);
  --bs-form-invalid-border-color: var(--rp-danger);
  --bs-form-valid-color: var(--rp-success);
  --bs-form-valid-border-color: var(--rp-success);
}