/* ==========================================================
   &Mattes — Design Tokens
   Das komplette Aussehen der Seite hängt an diesen Variablen.
   Neues Design = diese Datei ändern. Funktionen bleiben unberührt.
   ========================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2?v=258a93fe") format("woff2-variations"), url("../fonts/archivo.woff2?v=258a93fe") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2?v=3ae62151") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Farben — hell */
  --ground: #f4f5f7;
  --surface: #ffffff;
  --ink: #121a2b;
  --ink-soft: #3a4357;
  --muted: #647086;
  --line: rgba(18, 26, 43, 0.12);
  --accent: #7a1a33;          /* Bordeaux — die Farbe des "&" */
  --accent-ink: #ffffff;
  --accent-on-dark: #b3304c;   /* Bordeaux, aufgehellt für dunkle Flächen */
  --live: #1f9d63;

  /* Bühnen der Referenzen (bleiben in beiden Themes dunkel) */
  --stage-valet: #0b1e36;
  --stage-valet-accent: #4a9eff;
  --stage-nfc: #0a1f33;
  --stage-nfc-accent: #e2b658;
  --stage-ai: #16101a;
  --stage-ai-accent: #c24a61;
  --stage-text: #eef1f6;
  --stage-muted: rgba(238, 241, 246, 0.62);

  /* Schrift */
  --font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-amp: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --step-3: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  --step-4: clamp(3.2rem, 1.6rem + 7.2vw, 8.4rem);

  /* Raster */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --radius: 22px;
  --radius-sm: 12px;
  --header-h: 68px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b0f18;
    --surface: #131a28;
    --ink: #eef0f5;
    --ink-soft: #c6ccd8;
    --muted: #939cb0;
    --line: rgba(238, 240, 245, 0.12);
    --accent: #b83a52;
    --accent-ink: #ffffff;
    --live: #3ccf8e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0b0f18;
  --surface: #131a28;
  --ink: #eef0f5;
  --ink-soft: #c6ccd8;
  --muted: #939cb0;
  --line: rgba(238, 240, 245, 0.12);
  --accent: #b83a52;
  --accent-ink: #ffffff;
  --live: #3ccf8e;
  color-scheme: dark;
}