/* Premier Inn HDP – design tokens
   Source: live CSS custom properties on premierinn.com (Chakra UI theme, emotion).
   Captured 23 Oct 2026 from the London Waterloo (Lambeth Road) hotel page.
   Only brand/semantic tokens are listed; stock Chakra gray/red/blue/etc. scales
   (e.g. --chakra-colors-gray-100) and numeric sizes (--chakra-sizes-4 = 1rem) are also present on the site. */

:root {
  /* ---------- Colour: brand + semantic ---------- */
  --chakra-colors-black: #000000;
  --chakra-colors-white: #FFFFFF;
  --chakra-colors-baseBlack: #000000;
  --chakra-colors-baseWhite: #FFFFFF;
  --chakra-colors-fadedBaseWhite: #FFFFFF00;
  --chakra-colors-transparent: transparent;
  --chakra-colors-current: currentColor;
  --chakra-colors-overlay: #000000;

  --chakra-colors-primary: #00798e;            /* teal: badges, selected tab/radio, focus outline on rate card */
  --chakra-colors-secondary: #0178a5;
  --chakra-colors-blue: #0178A5;
  --chakra-colors-tertiary: #511E62;           /* purple */
  --chakra-colors-accessible: #007FAB;
  --chakra-colors-accessibleFocus: #2F133A;    /* button focus-visible outline */

  --chakra-colors-darkGrey1: #333333;          /* body copy in alerts */
  --chakra-colors-darkGrey2: #58595B;          /* input placeholder */
  --chakra-colors-darkGrey3: #511E62;
  --chakra-colors-lightGrey1: #979797;         /* radio border, input border */
  --chakra-colors-lightGrey2: #CCCCCC;         /* tab border, disabled button border, hover shadow */
  --chakra-colors-lightGrey3: #DDDDDD;         /* neutral alert border */
  --chakra-colors-lightGrey4: #E0E0E0;         /* section divider */
  --chakra-colors-lightGrey5: #F8f8f8;
  --chakra-colors-midGrey: #BFBFBF;

  /* Status */
  --chakra-colors-alert: #D73D00;
  --chakra-colors-error: #d90941;
  --chakra-colors-info: #007fab;
  --chakra-colors-success: #1C8754;
  --chakra-colors-alertTint: #FEEFD9;
  --chakra-colors-errorTint: #FBE6EC;
  --chakra-colors-infoTint: #e5f2f6;
  --chakra-colors-successTint: #e8f3ed;
  --chakra-colors-alertBorderTint: #D73D0066;
  --chakra-colors-errorBorderTint: #D9094166;
  --chakra-colors-infoBorderTint: #007FAB66;
  --chakra-colors-successBorderTint: #1C875466;
  --chakra-colors-infoBorder: #007FAB;
  --chakra-colors-tooltipAlert: #FEEFD9;
  --chakra-colors-tooltipError: #FBE6EC;
  --chakra-colors-tooltipInfo: #e5f2f6;
  --chakra-colors-tooltipSuccess: #E8F3ED;

  /* Buttons */
  --chakra-colors-btnPrimaryHoverBg: #008FA8;
  --chakra-colors-btnPrimaryFocusBoxShadow: #00A5C2;
  --chakra-colors-btnSecondaryEnabled: #511E62; /* secondary (outline) button + text links */
  --chakra-colors-btnSecondaryHoverBg: #65257A;
  --chakra-colors-btnSecondaryFocusBoxShadow: #7A2D94;

  /* Other */
  --chakra-colors-midPurple: #642587;
  --chakra-colors-darkPurple: #481B57;
  --chakra-colors-lightPurple: #6C3072;
  --chakra-colors-lightPurple2: #EBE4EC;
  --chakra-colors-darkPink: #AC467A;
  --chakra-colors-maroon: #73325B;
  --chakra-colors-primaryShadow: #EAF2F3;
  --chakra-colors-rangeSelection: #BFDDE3;
  --chakra-colors-discountApplied: #1C8754;
  --chakra-colors-promoCodeAvailable: #BED600;
  --chakra-colors-promoCodeNotAvailable: #EB5757;
  --chakra-colors-hubPrimary: #BDD500;
  --chakra-colors-hubSecondary: #7A3E98;
  --chakra-colors-piMapMarker: #531F59;
  --chakra-colors-zipPrimary: #FC0F42;
  --chakra-colors-zipSecondary: #1900ff;

  /* Body text colour/background actually computed on <body>: rgb(26,32,44) on #fff */
  --chakra-colors-chakra-body-text: rgb(26, 32, 44);
  --chakra-colors-chakra-body-bg: #FFFFFF;

  /* ---------- Typography ---------- */
  --chakra-fonts-heading: Proxima Nova Sans, helvetica, arial, sans-serif;
  --chakra-fonts-body: Proxima Nova Sans, helvetica, arial, sans-serif;
  --chakra-fonts-header: Proxima Nova Sans, helvetica, arial, sans-serif;
  --chakra-fonts-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --chakra-fontSizes-3xs: 0.45rem;
  --chakra-fontSizes-2xs: 0.625rem;
  --chakra-fontSizes-xxs: 12px;
  --chakra-fontSizes-xs: 13px;
  --chakra-fontSizes-sm: 14px;
  --chakra-fontSizes-md: 16px;
  --chakra-fontSizes-lg: 18px;
  --chakra-fontSizes-xl: 20px;
  --chakra-fontSizes-2xl: 23px;
  --chakra-fontSizes-3xl: 26px;
  --chakra-fontSizes-3xxl: 29px;
  --chakra-fontSizes-4xl: 36px;
  --chakra-fontSizes-5xl: 48px;
  --chakra-fontSizes-6xl: 60px;
  --chakra-fontSizes-7xl: 72px;

  --chakra-fontWeights-light: 300;
  --chakra-fontWeights-normal: 400;
  --chakra-fontWeights-medium: 500;
  --chakra-fontWeights-semibold: 600;
  --chakra-fontWeights-bold: 700;
  --chakra-fontWeights-extrabold: 800;

  /* Line heights are pixel-based on this site: lineHeights-2 = 20px, -3 = 24px, -4 = 32px */
  --chakra-lineHeights-1: 16px;
  --chakra-lineHeights-2: 20px;
  --chakra-lineHeights-3: 24px;
  --chakra-lineHeights-4: 32px;
  --chakra-lineHeights-5: 40px;
  --chakra-lineHeights-6: 56px;
  --chakra-lineHeights-7: 72px;
  --chakra-lineHeights-8: 88px;

  /* ---------- Space ---------- */
  /* Numeric steps follow Chakra (space-1 = .25rem, 2 = .5rem, 3 = .75rem, 4 = 1rem, 5 = 1.25rem, 6 = 1.5rem). */
  --chakra-space-1: 0.25rem;
  --chakra-space-2: 0.5rem;
  --chakra-space-3: 0.75rem;
  --chakra-space-4: 1rem;
  --chakra-space-5: 1.25rem;
  --chakra-space-6: 1.5rem;
  --chakra-space-0-5: 0.125rem;
  --chakra-space-1-5: 0.375rem;
  --chakra-space-2-5: 0.625rem;
  --chakra-space-3-5: 0.875rem;
  /* Named steps (px) */
  --chakra-space-xs: 4px;
  --chakra-space-sm: 8px;
  --chakra-space-xmd: 12px;
  --chakra-space-md: 16px;
  --chakra-space-xlg: 20px;
  --chakra-space-lg: 24px;
  --chakra-space-xl: 32px;
  --chakra-space-2xl: 40px;
  --chakra-space-3xl: 48px;
  --chakra-space-4xl: 56px;
  --chakra-space-5xl: 64px;
  --chakra-space-6xl: 72px;
  --chakra-space-7xl: 88px;
  --chakra-space-8xl: 96px;
  --chakra-space-9xl: 120px;
  --chakra-space-radiusSmall: 4px;

  /* Sizes used by the components below */
  --chakra-sizes-4: 1rem;
  --chakra-sizes-6: 1.5rem;
  --chakra-sizes-10: 2.5rem;
  --chakra-sizes-full: 100%;

  /* ---------- Radii ---------- */
  --chakra-radii-none: 0;
  --chakra-radii-sm: 0.125rem;
  --chakra-radii-base: 0.25rem;
  --chakra-radii-md: 0.375rem;
  --chakra-radii-lg: 0.5rem;
  --chakra-radii-xl: 0.75rem;
  --chakra-radii-2xl: 1rem;
  --chakra-radii-3xl: 1.5rem;
  --chakra-radii-full: 9999px;

  /* ---------- Shadows ---------- */
  --chakra-shadows-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --chakra-shadows-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --chakra-shadows-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --chakra-shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --chakra-shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --chakra-shadows-outline: 0 0 0 3px rgba(66, 153, 225, 0.6);   /* stock Chakra focus ring (blue) */
  --chakra-shadows-none: none;

  /* ---------- Breakpoints (min-width) ---------- */
  /* mobile 320 · xs 375 · sm 576 · md 768 · lg 1280 · xl 1440 */

  /* ---------- Motion ---------- */
  --chakra-transition-property-common: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  --chakra-transition-duration-fast: 150ms;
  --chakra-transition-duration-normal: 200ms;
  --chakra-transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; touch-action: manipulation; }
/* Minimal stand-in for Chakra's "preflight" reset (the live site ships the full one) */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
button, input { font: inherit; color: inherit; margin: 0; background: transparent; }
button { cursor: pointer; }
h3, p { margin: 0; }
img, svg { display: block; vertical-align: middle; }
body { margin: 0; font-family: var(--chakra-fonts-body); color: var(--chakra-colors-chakra-body-text); background: var(--chakra-colors-chakra-body-bg); }