/**
 * EJH Design System — canvas-ready design tokens
 * Auto-generated from ejh-design-system/src/styles/{default.css, themes/airline.css}
 * by extracting :root custom properties. This file is self-contained (no @import/@plugin
 * directives) so it can be injected directly into the prototype canvas iframe.
 *
 * NOTE: web fonts (easyjet_rounded_book, easyjet_generation_headline) are declared in the
 * source project's fonts.css via relative @font-face src paths, which do not resolve inside
 * the canvas iframe. --font-sans / --font-display below fall back to system fonts until the
 * actual .woff2 files are hosted somewhere reachable and the @font-face src URLs are updated.
 */

:root {
  /* Typography (moved here from @theme inline in the source project for portability) */
  --font-sans: easyjet_rounded_book, Arial, Helvetica, sans-serif;
  --font-display: easyjet_generation_headline, Arial, Helvetica, sans-serif;

  --jet-orange-50: #fffbf2;
  --jet-orange-100: #fff5e6;
  --jet-orange-200: #ffd9b3;
  --jet-orange-300: #ffb366;
  --jet-orange-400: #ff944d;
  --jet-orange-500: #ff6600;
  --jet-orange-600: #ff4600;
  --jet-orange-700: #cc3700;
  --jet-orange-800: #992900;
  --jet-orange-900: #661b00;
  --jet-orange-950: #4a1200;
  --grey-50: #ffffff;
  --grey-100: #f5f7f8;
  --grey-200: #eaf0f2;
  --grey-300: #d7e2e5;
  --grey-400: #b5babc;
  --grey-500: #8f9496;
  --grey-600: #6a6d6f;
  --grey-700: #4d5051;
  --grey-800: #333333;
  --grey-900: #1a1a1a;
  --grey-950: #000000;
  --green-50: #f4f7eb;
  --green-100: #ebf2da;
  --green-200: #cadea6;
  --green-300: #abcc7a;
  --green-400: #6ca331;
  --green-500: #367c00;
  --green-600: #2f7000;
  --green-700: #245e00;
  --green-800: #1a4a00;
  --green-900: #123800;
  --green-950: #0a2400;
  --red-50: #fcf6f0;
  --red-100: #fcf0e6;
  --red-200: #f7d4be;
  --red-300: #f0b095;
  --red-400: #e6654e;
  --red-500: #dc0e0e;
  --red-600: #c60717;
  --red-700: #b00020;
  --red-800: #850016;
  --red-900: #690010;
  --red-950: #4f000b;
  --yellow-50: #fffdf5;
  --yellow-100: #fffceb;
  --yellow-200: #fff6cf;
  --yellow-300: #ffefb0;
  --yellow-400: #ffde73;
  --yellow-500: #ffc838;
  --yellow-600: #e6ab2e;
  --yellow-700: #bf841f;
  --yellow-800: #995f14;
  --yellow-900: #73410b;
  --yellow-950: #4a2504;
  --blue-50: #f0f9fc;
  --blue-100: #e1f2fa;
  --blue-200: #b4dcf0;
  --blue-300: #8ac4e6;
  --blue-400: #3f91d4;
  --blue-500: #005abe;
  --blue-600: #004ead;
  --blue-700: #00398f;
  --blue-800: #002a73;
  --blue-900: #001d57;
  --blue-950: #001138;
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --color-white: #fff;
  --color-dark-gray: #333;
  --color-light-gray-bg: #f5f7f8;
  --color-border-gray: #ccc;
  --color-border-light: #ddd;
  --color-primary-orange: #ff6600;
  --color-overlay-bg: rgb(51 51 51 / 0.4);
  --bprogress-color: #ffc299;
  --sidebar-width: 25rem;
  --top-bar-header-height: 3.125rem;
  --z-index-fixed-header: 1000;
  --z-index-mobile-overlay: 1100;
  --z-index-basket-overlay: 1200;
  --z-index-mobile-modal: 1200;
  --z-index-mobile-drawer: 1200;
  --z-index-disclaimer-drawer: 1300;
  --z-index-secondary-header: 10;
  --z-index-basket-sidebar: 10;
  --color-primary-50: var(--jet-orange-50);
  --color-primary-100: var(--jet-orange-100);
  --color-primary-200: var(--jet-orange-200);
  --color-primary-300: var(--jet-orange-300);
  --color-primary-400: var(--jet-orange-400);
  --color-primary-500: var(--jet-orange-500);
  --color-primary-600: var(--jet-orange-600);
  --color-primary-700: var(--jet-orange-700);
  --color-primary-800: var(--jet-orange-800);
  --color-primary-900: var(--jet-orange-900);
  --color-primary-950: var(--jet-orange-950);
  --color-neutral-50: var(--grey-50);
  --color-neutral-100: var(--grey-100);
  --color-neutral-200: var(--grey-200);
  --color-neutral-300: var(--grey-300);
  --color-neutral-400: var(--grey-400);
  --color-neutral-500: var(--grey-500);
  --color-neutral-600: var(--grey-600);
  --color-neutral-700: var(--grey-700);
  --color-neutral-800: var(--grey-800);
  --color-neutral-900: var(--grey-900);
  --color-neutral-950: var(--grey-950);
  --color-success-50: var(--green-50);
  --color-success-100: var(--green-100);
  --color-success-200: var(--green-200);
  --color-success-300: var(--green-300);
  --color-success-400: var(--green-400);
  --color-success-500: var(--green-500);
  --color-success-600: var(--green-600);
  --color-success-700: var(--green-700);
  --color-success-800: var(--green-800);
  --color-success-900: var(--green-900);
  --color-success-950: var(--green-950);
  --color-error-50: var(--red-50);
  --color-error-100: var(--red-100);
  --color-error-200: var(--red-200);
  --color-error-300: var(--red-300);
  --color-error-400: var(--red-400);
  --color-error-500: var(--red-500);
  --color-error-600: var(--red-600);
  --color-error-700: var(--red-700);
  --color-error-800: var(--red-800);
  --color-error-900: var(--red-900);
  --color-error-950: var(--red-950);
  --color-warning-50: var(--yellow-50);
  --color-warning-100: var(--yellow-100);
  --color-warning-200: var(--yellow-200);
  --color-warning-300: var(--yellow-300);
  --color-warning-400: var(--yellow-400);
  --color-warning-500: var(--yellow-500);
  --color-warning-600: var(--yellow-600);
  --color-warning-700: var(--yellow-700);
  --color-warning-800: var(--yellow-800);
  --color-warning-900: var(--yellow-900);
  --color-warning-950: var(--yellow-950);
  --color-info-50: var(--blue-50);
  --color-info-100: var(--blue-100);
  --color-info-200: var(--blue-200);
  --color-info-300: var(--blue-300);
  --color-info-400: var(--blue-400);
  --color-info-500: var(--blue-500);
  --color-info-600: var(--blue-600);
  --color-info-700: var(--blue-700);
  --color-info-800: var(--blue-800);
  --color-info-900: var(--blue-900);
  --color-info-950: var(--blue-950);
  --color-primary: var(--jet-orange-500);
  --color-primary-foreground: var(--grey-50);
  --color-interactive: var(--jet-orange-500);
  --color-interactive-hover: var(--jet-orange-600);
  --color-interactive-active: var(--jet-orange-700);
  --color-interactive-disabled: var(--grey-600);
  --color-interactive-reversed: rgba(0, 0, 0, 0.5);
  --color-interactive-foreground: var(--grey-50);
  --color-interactive-secondary: var(--grey-50);
  --color-interactive-secondary-disabled: var(--grey-200);
  --color-background: var(--grey-50);
  --color-background-tinted: var(--grey-100);
  --color-background-inverted: var(--grey-800);
  --color-background-disabled: var(--grey-200);
  --color-foreground: var(--grey-800);
  --color-heading: var(--grey-950);
  --color-foreground-secondary: var(--grey-700);
  --color-foreground-disabled: var(--grey-600);
  --color-foreground-inverted: var(--grey-50);
  --color-foreground-primary: var(--jet-orange-500);
  --color-system-easyjet: var(--jet-orange-500);
  --color-system-easyjet-secondary: var(--jet-orange-100);
  --color-system-easyjet-tertiary: var(--jet-orange-200);
  --color-system-discount: var(--red-500);
  --color-system-discount-secondary: var(--red-100);
  --color-system-discount-tertiary: var(--red-200);
  --color-system-error: var(--red-700);
  --color-system-error-secondary: var(--red-100);
  --color-system-error-tertiary: var(--red-200);
  --color-system-info: var(--blue-500);
  --color-system-info-secondary: var(--blue-100);
  --color-system-info-tertiary: var(--blue-200);
  --color-system-success: var(--green-500);
  --color-system-success-secondary: var(--green-100);
  --color-system-success-tertiary: var(--green-200);
  --color-system-warning: var(--yellow-500);
  --color-system-warning-secondary: var(--yellow-100);
  --color-system-warning-tertiary: var(--yellow-200);
  --color-sales: var(--blue-500);
  --color-sales-secondary: var(--blue-100);
  --color-sales-tertiary: var(--blue-200);
  --color-upselling: var(--green-500);
  --color-upselling-secondary: var(--green-100);
  --color-upselling-tertiary: var(--green-200);
  --color-promo: var(--red-500);
  --color-promo-secondary: var(--red-100);
  --color-promo-tertiary: var(--red-200);
  --color-border-default: var(--grey-300);
  --color-border-selected: var(--jet-orange-600);
  --color-border-input: var(--grey-700);
  --color-border-input-disabled: var(--grey-300);
  --color-text-dark: #222;
  --radius: 0.375rem;
  --shadow-floating-xs: 0px 0px 3px 1px rgba(51, 51, 51, 0.15);
  --shadow-floating-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0px 0px 3px 1px rgba(51, 51, 51, 0.15);
  --shadow-sm-down: 0px 1px 3px 1px rgba(51, 51, 51, 0.15);
  --shadow-sm-up: 0px -1px 3px 1px rgba(51, 51, 51, 0.15);
  --shadow-md: 0px 0px 6px 2px rgba(51, 51, 51, 0.15);
  --shadow-md-down: 0px 2px 6px 2px rgba(51, 51, 51, 0.15);
  --shadow-md-up: 0px -2px 6px 2px rgba(51, 51, 51, 0.15);
  --shadow-lg: 0px 0px 12px 4px rgba(51, 51, 51, 0.15);
  --shadow-lg-down: 0px 4px 12px 4px rgba(51, 51, 51, 0.15);
  --shadow-lg-up: 0px -4px 12px 4px rgba(51, 51, 51, 0.15);
  --color-shadow: rgb(0 0 0 / 0.07);
  --color-shadow-light: rgb(51 51 51 / 0.15);
  --bprogress-box-shadow: 0 0 10px #ffc299, 0 0 5px #ffc299;
}

/* Font faces — update src URLs to a reachable host to enable the real brand typefaces */
@font-face {
  font-family: easyjet_rounded_book;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/easyJetRoundedBook.woff2') format('woff2');
}
@font-face {
  font-family: easyjet_rounded_book;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/easyJetRoundedDemi.woff2') format('woff2');
}
@font-face {
  font-family: easyjet_generation_headline;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/easyjet_generation_headline.woff2') format('woff2');
}

body {
  font-family: var(--font-sans);
  color: var(--color-foreground);
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-display);
}