/* ============================================================
   JETLAG — Design Tokens
   Mechanik nach noartmusic.com (analyse/), Identität: Luftfahrt.
   ============================================================ */

:root {
  /* ---- Farben ---- */
  --color-light: #ffffff;
  --color-dark: #000000;
  --color-brand: #e30613;        /* Circoloco-Rot (Print-Rot) */
  --color-signal: #00c865;       /* ON TIME */
  --color-caution: #ffb400;      /* DELAYED */
  --color-grey: #808080;
  --color-grey-dark: #333333;

  --color-dark-20: rgba(0, 0, 0, .2);
  --color-dark-50: rgba(0, 0, 0, .5);
  --color-light-20: rgba(255, 255, 255, .2);
  --color-light-50: rgba(255, 255, 255, .5);

  --color-border: var(--color-dark-20);

  /* ---- Fluid-Basis (Client-First-Formel aus der noart-Analyse) ---- */
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* ---- Schriften ---- */
  --font-mono: "B612 Mono", "SF Mono", "Courier New", monospace;
  --font-ui: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Raleway", "Arial Black", sans-serif;
  --font-display-stretch: normal;

  /* ---- Typo-Skala ---- */
  --text-h2: 3em;
  --text-body-large: 1.125em;
  --text-body: 1em;
  --text-tag: .75em;
  --text-tag-small: .625em;
  --lh-heading: 1;
  --lh-body: 1.35;

  /* ---- Spacing (×2-Reihe) ---- */
  --space-3xs: .3125em;   /*  5px */
  --space-2xs: .375em;    /*  6px — Icon<->Text */
  --space-xs: .5em;       /*  8px */
  --space-sm: .625em;     /* 10px — Karten-intern */
  --space-md: 1.25em;     /* 20px — Basis-Gap, Panel-Insets */
  --space-lg: 2.5em;      /* 40px — Sektionsblöcke */
  --space-xl: 5em;        /* 80px */

  --padding-global: 2.5em;
  --padding-section: 10em;
  --padding-button: .9375em;

  /* ---- Radius & Border ---- */
  --radius-small: .125em;   /* 2px — de-facto einziger Radius */
  --border-1: 1px solid var(--color-border);
  --border-dark: 1px solid var(--color-dark);
  --border-brand: 1px solid var(--color-brand);

  /* ---- Motion ---- */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.625, .05, 0, 1);
  --dur-instant: .1s;
  --dur-fast: .3s;
  --dur-base: .4s;
  --dur-medium: .5s;
  --dur-slow: .6s;
  --dur-slower: .8s;

  --opacity-dim: .2;
  --opacity-muted: .5;
  --opacity-marker: .05;

  /* ---- Signatur-Maße ---- */
  --card-inset: 1em;        /* Bild-Einrückung beim Hover */
  --marker-size: .625em;    /* 10px Eckwinkel */
  --tag-dot: .4375em;       /* 7px Quadrat */

  /* ---- Z-Bänder ---- */
  --z-card: 2;
  --z-hero: 100;
  --z-hud: 950;
  --z-footer: 995;
  --z-cta: 997;
  --z-chrome: 998;
  --z-cursor: 999;
  --z-wipe: 9999;
}

/* Fluid-Breakpoints (Werte aus der noart-Analyse) */
@media (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
    --text-h2: 2em;
    --text-body-large: 1em;
  }
}
@media (max-width: 767px) {
  :root {
    --size-container-ideal: 600;
    --size-container-min: 480px;
    --size-container-max: 767px;
    --padding-global: 1.25em;
    --padding-section: 7.5em;
    --text-body-large: .875em;
  }
}
@media (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}
@media (min-width: 1921px) {
  :root { --size-font: 21.333333px; }
}