/* ──────────────────────────────────────────────────────────────────────────
   1000PS Design System – Foundations
   Source of truth: CI Manual 2023/2024 + UX Foundation Document (April 2026)
   ────────────────────────────────────────────────────────────────────────── */

/* Mulish – the official 1000PS typeface (Google Fonts).
   Loaded via the import below; the @font-face declarations are managed by Google. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  /* ── Brand color ─────────────────────────────────────────────────────────── */
  /*  Torch Red — single hero color of the brand.
      "Eine heiße Farbe, die ein starkes Gefühl von Leidenschaft und Energie hervorruft."
      RGB 255/27/55 · CMYK 0/92/70/0                                          */
  --torch-red:        #FF1B37;
  --torch-red-press:  #E0152D;   /* approx. -8% L for active/pressed states   */
  --torch-red-hover:  #FF3550;   /* approx. +6% L for hover                   */
  --torch-red-tint:   #FFE6EA;   /* very light wash for badges / banners      */

  /* ── Neutrals (10-step CI scale, +pure black & white) ─────────────────────
     Per CI Manual page 10: Grau 10..90 plus Solid Schwarz/Weiß.              */
  --white:    #FFFFFF;
  --gray-05:  #F7F7F7;   /* derived – page wash                                */
  --gray-10:  #E3E3E3;
  --gray-20:  #C7C7C7;
  --gray-30:  #ACACAC;
  --gray-40:  #909090;
  --gray-50:  #757575;   /* WCAG AA over white / black @ ≥4.5:1               */
  --gray-60:  #5D5D5D;
  --gray-70:  #464646;
  --gray-80:  #2E2E2E;
  --gray-90:  #171717;
  --black:    #000000;

  /* ── Semantic surface / foreground tokens ────────────────────────────────  */
  --bg:           var(--white);
  --bg-muted:     var(--gray-05);
  --bg-inverse:   var(--gray-90);
  --bg-card:      var(--white);
  --bg-overlay:   rgba(23, 23, 23, 0.72);

  --fg:           var(--gray-90);   /* primary text                            */
  --fg-2:         var(--gray-70);   /* secondary text / metadata               */
  --fg-3:         var(--gray-50);   /* tertiary, hints, "von"-labels           */
  --fg-disabled:  var(--gray-30);
  --fg-on-red:    var(--white);
  --fg-on-dark:   var(--white);

  --border:       var(--gray-10);
  --border-strong: var(--gray-20);
  --border-focus: var(--torch-red);

  /* Accent — used sparingly for links, key CTAs, active states */
  --accent:       var(--torch-red);
  --accent-fg:    var(--white);

  /* Status colors are NOT in the CI manual. The system stays monochrome +
     Torch Red. For unavoidable system feedback we approximate with utility
     tones tuned to sit beside Torch Red without competing.                   */
  --success:      #1F7A4D;
  --warning:      #C58A00;
  --danger:       var(--torch-red);

  /* ── Type ────────────────────────────────────────────────────────────────  */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight axis (Mulish ships 200..900) */
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;     /* used for headlines + the badge "LEIWAND/CREW" set */

  /* Type scale — driven by content density seen on 1000PS.at:
     editorial hero is loud (Black, tight tracking), body is comfortable. */
  --fs-display: clamp(40px, 5.6vw, 80px);
  --fs-h1:      clamp(32px, 3.6vw, 48px);
  --fs-h2:      28px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;
  --fs-eyebrow: 12px;   /* tracked + uppercased meta line                   */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-loose:    1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.14em;

  /* ── Space / radius / elevation ──────────────────────────────────────────  */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows — kept restrained; the brand reads editorial, not floaty.
     Light surfaces use a hairline + tiny soft shadow; heavy lift only for
     overlays / modals.                                                       */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(23,23,23,0.06), 0 1px 1px rgba(23,23,23,0.04);
  --shadow-2: 0 2px 6px rgba(23,23,23,0.08), 0 1px 2px rgba(23,23,23,0.04);
  --shadow-3: 0 8px 24px rgba(23,23,23,0.12), 0 2px 6px rgba(23,23,23,0.06);
  --shadow-overlay: 0 24px 64px rgba(23,23,23,0.32);

  /* Motion */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-in:    cubic-bezier(.7, 0, .84, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* Layout */
  --container:    1280px;
  --container-md: 980px;
  --gutter:       var(--space-6);

  /* Focus ring — accessibility (WCAG-AA per CI guidance) */
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--torch-red);
}

/* ────────────────────────────────────────────────────────────────────────────
   Semantic element styles. Re-use everywhere instead of hand-rolling.
   ──────────────────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

.display {
  font-size: var(--fs-display);
  text-transform: none;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--torch-red);
}

.meta {
  font-size: var(--fs-small);
  color: var(--fg-3);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--torch-red);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--torch-red); }

code, kbd, pre, samp { font-family: var(--font-mono); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Utility classes the UI kits + slides re-use.
   ──────────────────────────────────────────────────────────────────────── */

.container       { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--md   { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--gutter); }

.surface         { background: var(--bg-card);   color: var(--fg); }
.surface--muted  { background: var(--bg-muted);  color: var(--fg); }
.surface--dark   { background: var(--bg-inverse); color: var(--fg-on-dark); }
.surface--red    { background: var(--torch-red);  color: var(--fg-on-red); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* The signature 1000PS button system — three variants only. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active        { transform: translateY(1px); }

.btn--primary {
  background: var(--torch-red);
  color: var(--fg-on-red);
  border-color: var(--torch-red);
}
.btn--primary:hover  { background: var(--torch-red-hover); border-color: var(--torch-red-hover); }
.btn--primary:active { background: var(--torch-red-press); border-color: var(--torch-red-press); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--gray-20);
}
.btn--ghost:hover    { border-color: var(--gray-90); }
.btn--ghost:active   { background: var(--gray-05); }

.btn--dark {
  background: var(--gray-90);
  color: var(--white);
  border-color: var(--gray-90);
}
.btn--dark:hover     { background: var(--gray-80); border-color: var(--gray-80); }

.btn--sm { padding: 8px 14px; font-size: var(--fs-small); }
.btn--lg { padding: 16px 28px; font-size: var(--fs-h4); }

/* Pill / badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--gray-05);
  color: var(--gray-80);
}
.badge--red  { background: var(--torch-red); color: var(--fg-on-red); }
.badge--dark { background: var(--gray-90);    color: var(--fg-on-dark); }
.badge--outline { background: transparent; border: 1px solid var(--gray-20); color: var(--fg); }

/* Form basics */
.input, .select, .textarea {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--torch-red);
  box-shadow: 0 0 0 3px rgba(255, 27, 55, 0.15);
}