html {
    font-size: 16px;

    /* ============================================================
       DESIGN TOKENS
       Architecture: Base → Semantics → Composites → Components

       1. BASE TOKENS
       Raw, value-only. No semantics. No components.
    ============================================================ */

    /* Font families */
    --font-family-base: Hind, Arial, Helvetica, sans-serif;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Font sizes */
    --font-size-100: 0.875rem; /* 14px */
    --font-size-200: 1rem; /* 16px */
    --font-size-300: 1.125rem; /* 18px */
    --font-size-400: 1.25rem; /* 20px */
    --font-size-500: 1.375rem; /* 22px */
    --font-size-600: 1.5rem; /* 24px */
    --font-size-700: 1.75rem; /* 28px */
    --font-size-800: 2rem; /* 32px */
    --font-size-900: 2.5rem; /* 40px */

    /* Line heights (unitless) */
    --line-height-tight: 1.2;
    --line-height-normal: 1.45;
    --line-height-relaxed: 1.6;
    --line-height-spacious: 2;

    /* Spacing */
    --padding-compact: 4px;
    --padding-comfortable: 8px;
    --padding-spacious: 12px;
    --padding-maximum: 20px;
    --content-gap-size: 3vw;

    /* Borders */
    --border-none: 0;
    --border-thin: 1px;
    --border-regular: 2px;
    --border-focus: var(--border-regular);

    /* Radius */
    --radius-none: 0;
    --radius-soft: 4px;
    --radius-rounded: 8px;

    /* icon */
    --icon-size-small: 12px;
    --icon-size-medium: 16px;

    /* Colors – primitives */
    --color-white: #FFF;
    --color-black: #000;

    --color-grey-090: #F1F1F1;
    --color-grey-080: #E3E3E3;
    --color-grey-070: #D6D6D6;
    --color-grey-060: #C8C8C8;
    --color-grey-050: #BABABA;
    --color-grey-040: #878787;
    --color-grey-030: #545454;
    --color-grey-020: #3A3A3A;
    --color-grey-010: #212121;

    --color-brand-000: #00072B;
    --color-brand-010: #0D2145;
    --color-brand-020: #263A5E;
    --color-brand-030: #405478;
    --color-brand-040: #596D91;
    --color-brand-050: #7387AB;
    --color-brand-060: #8F9FBC;
    --color-brand-070: #ABB7CD;
    --color-brand-080: #C7CFDD;
    --color-brand-090: #E3E7EE;
    --color-brand-100: #F1F3F7;

    --color-focus: #405478;

    --color-black-alpha-12: rgba(0, 0, 0, 0.12);
    --color-transparent: rgba(255, 255, 255, 0);

    /* ============================================================
       2. SEMANTIC TOKENS
       Express design intent. No component knowledge.
    ============================================================ */

    /* Typography roles */
    --text-display-weight: var(--font-weight-semibold);
    --text-title-weight: var(--font-weight-semibold);
    --text-body-weight: var(--font-weight-regular);
    --text-label-weight: var(--font-weight-regular);

    /* Typography sizes */
    --text-display-large-size: var(--font-size-800);
    --text-display-medium-size: var(--font-size-700);
    --text-display-small-size: var(--font-size-600);

    --text-title-large-size: var(--font-size-500);
    --text-title-medium-size: var(--font-size-400);
    --text-title-small-size: var(--font-size-200);
    --text-title-xs-size: var(--font-size-100);

    --text-body-large-size: var(--font-size-400);
    --text-body-medium-size: var(--font-size-200);
    --text-body-small-size: var(--font-size-100);

    --text-label-large-size: var(--font-size-600);
    --text-label-medium-size: var(--font-size-200);
    --text-label-small-size: var(--font-size-100);

    /* Typography line heights */
    --text-display-line-height: var(--line-height-tight);
    --text-title-line-height: var(--line-height-normal);
    --text-body-line-height: var(--line-height-relaxed);
    --text-label-line-height: var(--line-height-normal);

    /* Focus */
    --color-action-border-focus: var(--color-focus);
    --color-action-border-focus-variant: var(--color-white);

    /* Elevations */
    --elevation-soft: 0 2px 7px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);

    /* Gradients */

    /* Surfaces */
    --color-area-neutral-subtlest-background: var(--color-white);
    --color-area-neutral-subtler-background: var(--color-grey-090);
    --color-area-brand-background: var(--color-brand-020);

    /* Text colors */
    --color-area-brand-foreground: var(--color-white);
    --color-area-neutral-subtlest-foreground: var(--color-grey-010);
    --color-area-neutral-subtlest-foreground-link: var(--color-brand-030);
    --color-area-neutral-subtlest-foreground-headline: var(--color-grey-010);
    --color-area-neutral-subtler-foreground: var(--color-grey-010);

    /* Border colors */
    --color-area-neutral-subtler-border: var(--color-grey-040);

    /* Actions */
    --color-action-primary-background: var(--color-brand-020);
    --color-action-primary-background-hover: var(--color-brand-030);
    --color-action-primary-background-active: var(--color-brand-010);
    --color-action-primary-foreground: var(--color-white);
    --color-action-primary-foreground-variant: var(--color-white);
    --color-action-primary-border: var(--color-transparent);

    --color-action-neutral-background: var(--color-grey-090);
    --color-action-neutral-background-hover: var(--color-grey-080);
    --color-action-neutral-background-active: var(--color-grey-070);
    --color-action-neutral-foreground: var(--color-grey-010);
    --color-action-neutral-border: var(--color-grey-040);

    /* ============================================================
       3. TYPOGRAPHY COMPOSITE TOKENS
       Might be use full, might be to much, will decide to keep or remove later
    ============================================================ */

    --font-display-large: var(--text-display-weight) var(--text-display-large-size) /var(--text-display-line-height) var(--font-family-base);
    --font-display-medium: var(--text-display-weight) var(--text-display-medium-size) /var(--text-display-line-height) var(--font-family-base);
    --font-display-small: var(--text-display-weight) var(--text-display-small-size) /var(--text-display-line-height) var(--font-family-base);
    --font-title-large: var(--text-title-weight) var(--text-title-large-size) /var(--text-title-line-height) var(--font-family-base);
    --font-title-medium: var(--text-title-weight) var(--text-title-medium-size) /var(--text-title-line-height) var(--font-family-base);
    --font-title-small: var(--text-title-weight) var(--text-title-small-size) /var(--text-title-line-height) var(--font-family-base);
    --font-body-medium: var(--text-body-weight) var(--text-body-medium-size) /var(--text-body-line-height) var(--font-family-base);
    --font-body-small: var(--text-body-weight) var(--text-body-small-size) /var(--text-body-line-height) var(--font-family-base);
    --font-label-medium: var(--text-label-weight) var(--text-label-medium-size) /var(--text-label-line-height) var(--font-family-base);
    --font-label-small: var(--text-label-weight) var(--text-label-small-size) /var(--text-label-line-height) var(--font-family-base);

    /* ============================================================
       4. COMPONENT TOKENS
       Thin layer. Allowed to reference semantics only.
       Only define differences of themes here.
    ============================================================ */

    /* App / Layout */
    /* Header */
    --header-height: 64px;
    --header-logo-height: 17px;
    --header-logo-width: 131px;

    /* Hero */
    --hero-height-visible: 182px;
    --hero-height-full: 345px;
    --hero-height-overlayed: 163px;
    --hero-foreground: var(--color-area-neutral-subtlest-foreground);

    /* ============================================================
       NON THEMING RELEVANT TOKENS
    ============================================================ */

    /* Z-index */
    --z-drawer: 120;
}

/* --small-max-viewport */
@media (min-width: 414px) and (max-width: 767px) {
    html {
        --content-gap-size: 4vw;
    }
}

/* --medium-viewport and --large-viewport combined */
@media (min-width: 768px) {
    html {
        --content-gap-size: 30px;
    }
}

@media (max-width: 991px) {
    html {
        --content-wrapper-max-width: 100%;
    }
}

@media (min-width: 992px) {
    html {
        --content-wrapper-max-width: 1024px;
    }
}

html {
    font: var(--font-body-medium);
    color: var(--color-area-neutral-subtlest-foreground);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: var(--color-area-neutral-subtlest-background);
    /* Fixes the auto font-size adjustments on ios devices */
    -webkit-text-size-adjust: 100%;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Hind Regular"), local("Hind-Regular"), url("https://media.airline-direct.de/fonts/hind/hind-v16-latin-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://media.airline-direct.de/fonts/hind/hind-v16-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Hind SemiBold"), local("Hind-SemiBold"), url("https://media.airline-direct.de/fonts/hind/hind-v16-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}