:host,
.maui-theme-lh {
  color-scheme: light;

  /* Theme */
  --maui-theme: maui-lh;

  /* Breakpoints (min-width, max-width = next breakpoint - 1px) */
  --maui-breakpoint-xxs: 0;
  --maui-breakpoint-xs: 376px;
  --maui-breakpoint-sm: 768px;
  --maui-breakpoint-md: 1024px;
  --maui-breakpoint-lg: 1025px;
  --maui-breakpoint-xl: 1281px;

  /*****************************************************************************
  * Typography
   *****************************************************************************/

  /* Base definition */

  --maui-font-family-headline: 'LufthansaHead', Arial, Helvetica, sans-serif;
  --maui-font-family-copy: 'LufthansaText', Arial, Helvetica, sans-serif;

  --maui-font-size-1: 12px;
  --maui-font-size-2: 14px;
  --maui-font-size-3: 18px;
  --maui-font-size-4: 24px;
  --maui-font-size-5: 28px;
  --maui-font-size-6: 32px;
  --maui-font-size-7: 42px;

  --maui-line-height-1: 14px;
  --maui-line-height-2: 18px;
  --maui-line-height-3: 24px;
  --maui-line-height-4: 28px;
  --maui-line-height-5: 32px;
  --maui-line-height-6: 36px;
  --maui-line-height-7: 48px;

  --maui-font-weight-regular: 400;
  --maui-font-weight-bold: 700;

  /*****************************************************************************/
  /*****************************************************************************/
  /*****************************************************************************/

  /* Radii */

  --maui-radii-default-radius: 4px;
  --maui-radii-pill-radius: 99999px;

  /* Spacing */

  --maui-spacing-base: 10px;

  --maui-spacing-1: 2px;
  --maui-spacing-2: 5px;
  --maui-spacing-3: 10px;
  --maui-spacing-4: 20px;
  --maui-spacing-5: 30px;
  --maui-spacing-6: 40px;
  --maui-spacing-7: 50px;
  --maui-spacing-8: 60px;
  --maui-spacing-9: 80px;
  --maui-spacing-10: 100px;

  --maui-form-column-width: 335px;

  /*
   * Palette Colors
   *
   * Color values are only allowed to appear once!
   */

  --maui-color-brand-white: #ffffff; /* White. */
  --maui-color-brand-lhgrey1: #f5f5f5; /* gray-800 */
  --maui-color-brand-lhgrey2: #ebebeb; /* gray-700 */
  --maui-color-brand-lhgrey3: #dcdcdc; /* gray-600 */
  --maui-color-brand-lhgrey3-transparent: #dcdcdc4d; /* gray-600 at 30% opacity */
  --maui-color-brand-lhgrey4: #cccccc; /* gray-500 */
  --maui-color-brand-lhgrey4-transparent: #cccccc4d; /* gray-500 at 30% opacity */
  --maui-color-brand-lhgrey5: #b4b4b4; /* gray-400 */
  --maui-color-brand-lhgrey6: #999999; /* gray-300 */
  --maui-color-brand-lhgrey7: #666666; /* gray-200 */
  --maui-color-brand-lhgrey8: #333333; /* gray-100 */
  --maui-color-brand-black: #000000;
  --maui-color-brand-black-transparent: #0000004d; /* 30% opacity */

  --maui-color-brand-lhdeepblue: #05164d; /* Main brand color */
  --maui-color-brand-whale-blue: #52627c;
  --maui-color-brand-marble-blue: #414e63;
  --maui-color-brand-lhyellow: #ffad00; /* Secondary brand color */
  --maui-color-brand-sunglow-yellow: #ffbd32; /* Secondary brand color hover sunglow y.*/
  /* Message specific colors */
  --maui-color-brand-green: #417505;
  --maui-color-brand-red: #cc0000;
  --maui-color-brand-cosmos-red: #fbeded;
  --maui-color-brand-pale-yellow: #fffedc;
  --maui-color-brand-harp-green: #f2f5ee;
  /* Status specific colors */
  --maui-color-brand-silver: #757575;
  --maui-color-brand-gold: #8f7231;
  --maui-color-brand-black-2: #191919;
  /* cabinclass specific colors */
  --maui-color-brand-copper-red: #a54a4a;
  --maui-color-brand-slate-blue: #47616c;
  --maui-color-brand-pine-green: #2c5744;
  --maui-color-brand-cactus-green: #4c6e48;

  /*
   * Functional colors
   *
   * These should match between the tenants, only reassigning of existing variables.
   */

  /* Brand */
  --maui-color-brand-primary: var(--maui-color-brand-lhdeepblue);
  --maui-color-brand-secondary: var(--maui-color-brand-lhyellow);
  --maui-color-brand-light: var(--maui-color-brand-white);
  --maui-color-brand-dark: var(--maui-color-brand-black);

  /* Grey */
  --maui-color-grey-01: var(--maui-color-brand-lhgrey1);
  --maui-color-grey-02: var(--maui-color-brand-lhgrey2);
  --maui-color-grey-03: var(--maui-color-brand-lhgrey3);
  --maui-color-grey-04: var(--maui-color-brand-lhgrey4);
  --maui-color-grey-05: var(--maui-color-brand-lhgrey5);
  --maui-color-grey-06: var(--maui-color-brand-lhgrey6);
  --maui-color-grey-07: var(--maui-color-brand-lhgrey7);
  --maui-color-grey-08: var(--maui-color-brand-lhgrey8);

  /* Status */
  --maui-color-status-member: var(--maui-color-brand-lhdeepblue);
  --maui-color-status-frequenttraveller: var(--maui-color-brand-silver);
  --maui-color-status-senator: var(--maui-color-brand-gold);
  --maui-color-status-hon: var(--maui-color-brand-black-2);

  /* Class */
  --maui-color-cabinclass-first: var(--maui-color-brand-copper-red);
  --maui-color-cabinclass-business: var(--maui-color-brand-slate-blue);
  --maui-color-cabinclass-premiumeconomy: var(--maui-color-brand-pine-green);
  --maui-color-cabinclass-economy: var(--maui-color-brand-cactus-green);

  /* Disabled */
  --maui-color-disabled-background: var(--maui-color-grey-02);
  --maui-color-disabled-foreground: var(--maui-color-grey-04);
  --maui-color-disabled-background-inverted: var(
    --maui-color-brand-lhgrey4-transparent
  );
  --maui-color-disabled-foreground-inverted: var(
    --maui-color-brand-lhgrey3-transparent
  );

  /* Text */
  --maui-color-text-headline: var(--maui-color-brand-lhdeepblue);
  --maui-color-text-copy: var(--maui-color-brand-lhdeepblue);
  --maui-color-text-caption: var(--maui-color-brand-lhgrey7);
  --maui-color-text-headline-inverted: var(--maui-color-brand-white);
  --maui-color-text-copy-inverted: var(--maui-color-brand-white);
  --maui-color-text-caption-inverted: var(--maui-color-brand-white);

  /* Interaction */
  --maui-color-interaction-interaction: var(--maui-color-brand-whale-blue);
  --maui-color-interaction-interactionhover: var(
    --maui-color-brand-marble-blue
  );
  --maui-color-interaction-buttonprimary: var(
    --maui-color-brand-lhyellow
  ); /* background */
  --maui-color-interaction-buttonprimaryhover: var(
    --maui-color-brand-sunglow-yellow
  );
  /* TODO rename to --maui-color-interaction-secondary */
  --maui-color-interaction-buttonsecondary: var(
    --maui-color-brand-lhdeepblue
  ); /* border */
  --maui-color-interaction-buttonsecondaryhover: var(
    --maui-color-brand-lhdeepblue
  ); /* secondary-2 */

  /* Notification */
  --maui-color-message-info: var(--maui-color-brand-lhgrey6);
  --maui-color-message-bg-info: var(--maui-color-grey-01);
  --maui-color-message-success: var(--maui-color-brand-green);
  --maui-color-message-bg-success: var(--maui-color-brand-harp-green);
  --maui-color-message-warning: var(--maui-color-brand-lhyellow);
  --maui-color-message-bg-warning: var(--maui-color-brand-pale-yellow);
  --maui-color-message-error: var(--maui-color-brand-red);
  --maui-color-message-bg-error: var(--maui-color-brand-cosmos-red);

  /* Display */
  --maui-color-display-ontime: var(--maui-color-brand-green);
  --maui-color-display-delayed: var(--maui-color-brand-red);

  /* Shadows */
  --maui-effect-shadow-default-radius: 4px;
  --maui-effect-shadow-default-color: rgba(0, 0, 0, 0.2);
  --maui-effect-shadow-default-offset-x: 0;
  --maui-effect-shadow-default-offset-y: 1px;
  --maui-effect-shadow-default-spread: 0;
  --maui-effect-shadow-hover-radius: 12px;
  --maui-effect-shadow-hover-color: rgba(0, 0, 0, 0.3);
  --maui-effect-shadow-hover-offset-x: 0;
  --maui-effect-shadow-hover-offset-y: 2px;
  --maui-effect-shadow-hover-spread: 0;
  --maui-effect-shadow-focus-radius: 6px;
  --maui-effect-shadow-focus-color: rgba(82, 98, 124, 1);
  --maui-effect-shadow-focus-offset-x: 0;
  --maui-effect-shadow-focus-offset-y: 0;
  --maui-effect-shadow-focus-spread: 1px;

  /* Focus */
  --maui-focus-outline-offset: 7px;
  /* --maui-focus-outline-offset-y: null; // override for e.g. collapsible */
  --maui-focus-radius: 6px;
  --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
    var(--maui-effect-shadow-focus-offset-y)
    var(--maui-effect-shadow-focus-radius)
    var(--maui-effect-shadow-focus-spread) var(--maui-effect-shadow-focus-color);
}

/*****************************************************************************
 * Utilities
 *****************************************************************************/

.maui-scroll-lock {
  padding-right: var(--maui-scroll-lock-size) !important;
  overflow: hidden !important;
}

/*****************************************************************************
 * Font face definitions
 *****************************************************************************/

@font-face {
  font-family: 'IconFontLH';
  src: url('../fonts/lufthansa/Icons-v2.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'LufthansaHead';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/lufthansa/LufthansaHeadWeb-Light.woff')
    format('woff');
}

@font-face {
  font-family: 'LufthansaHead';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/lufthansa/LufthansaHeadWeb-Bold.woff')
    format('woff');
}

@font-face {
  font-family: 'LufthansaText';
  src: url('../fonts/lufthansa/LufthansaTextWeb-Light.woff')
    format('woff');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'LufthansaText';
  src: url('../fonts/lufthansa/LufthansaTextWeb-Regular.woff')
    format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'LufthansaText';
  src: url('../fonts/lufthansa/LufthansaTextWeb-Bold.woff')
    format('woff');
  font-style: normal;
  font-weight: 700;
}