/* ==========================================================================
   tokens.css
   Design Tokens für about.incom.org — abgeleitet aus dem Figma Design System
   (Farben, Type Scale, Spacing). Änderungen hier wirken sich global aus.
   ========================================================================== */

/* --- Font Faces: PP Telegraf ------------------------------------------- */
@font-face {
  font-family: "PP Telegraf";
  src: url("../fonts/PPTelegraf-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("../fonts/PPTelegraf-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("../fonts/PPTelegraf-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("../fonts/PPTelegraf-Ultrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Ersatzschrift mit PP-Telegraf-Maßen: Arial wird per size-adjust und
   ascent/descent-override auf die Abmessungen von PP Telegraf gezogen
   (gemessen im Browser: Fließtext 102,6 %, Semibold 100,5 %, Ultrabold
   104,5 % der Arial-Breite; Ascent 96,5 %, Descent 30 %, Zeilenlücke 11 % der Schriftgröße).
   Solange die echte Schrift noch lädt, bleibt der Zeilenumbruch so fast
   identisch und der Text springt beim Tausch kaum. */
@font-face {
  font-family: "PP Telegraf Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 102.64%;
  ascent-override: 94%;
  descent-override: 29.2%;
  line-gap-override: 10.7%;
}
@font-face {
  font-family: "PP Telegraf Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 100.49%;
  ascent-override: 96%;
  descent-override: 29.9%;
  line-gap-override: 10.9%;
}
@font-face {
  font-family: "PP Telegraf Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 800;
  size-adjust: 104.51%;
  ascent-override: 92.3%;
  descent-override: 28.7%;
  line-gap-override: 10.5%;
}

:root {
  color-scheme: light dark; /* native UI (Scrollbars, Auswahl-Highlight etc.)
    soll dem OS-Farbschema folgen, genau wie der Rest der Seite unten */

  /* --- Grundfarben (Grey-Skala) ----------------------------------------- */
  --grey-0: #FFFFFF;
  --grey-1: #EEEEEF;
  --grey-1-2: #DDDDDE;
  --grey-2: #CECED0;
  --grey-3: #76777A;
  --grey-4: #595A5D;
  --grey-5: #3C3C3E;
  --grey-6: #0E0E0F;

  /* --- Stroke-Farben (white-bg Kontext = Default) ------------------------ */
  --stroke-default: var(--grey-6);
  --stroke-subtlest: var(--grey-1);
  --stroke-subtler: var(--grey-2);

  /* --- Stroke-Farben (dark-bg Kontext, z.B. m-feature-grid, m-contact) --- */
  --stroke-dark-default: var(--grey-0);
  --stroke-dark-subtlest: var(--grey-5);
  --stroke-dark-subtler: var(--grey-4);

  /* --- Linien: alle grauen Rahmen und Trennlinien der Seite -------------- */
  /* EIN Regler für alle Linien (border-*): --line-strength. 100% = volle
     Strichfarbe (wie bisher), kleinere Werte machen die Linien zarter
     (Mischung mit transparent). Die Farbe selbst kommt weiter aus
     --stroke-subtler (helle Flächen) bzw. --stroke-dark-subtler (dunkle
     Flächen) und kippt im Dark Mode automatisch mit. Icons/Pfeile
     (color: --stroke-subtler) sind davon bewusst NICHT betroffen. */
  --line-strength: 80%;
  --line-subtler: color-mix(in srgb, var(--stroke-subtler) var(--line-strength), transparent);
  --line-dark-subtler: color-mix(in srgb, var(--stroke-dark-subtler) var(--line-strength), transparent);

  /* --- Surface-Farben (light = white-bg Kontext) ------------------------- */
  --surface-light-default: var(--grey-0);
  --surface-light-subtlest: var(--grey-1);
  --surface-light-subtler: var(--grey-1-2);

  --surface-dark-default: var(--grey-6);
  --surface-dark-subtlest: var(--grey-5);
  --surface-dark-subtler: var(--grey-4);

  /* --- Akzentfarbe ---------------------------------------------------------
     Figma-Variable "green/dark-bg" — trotz des Namens als reine Akzentfarbe
     verwendet (z.B. ausgewählte Kachel in m-feature-select), nicht an einen
     dark-bg-Kontext gebunden wie die stroke-dark-* / surface-dark-* Tokens
     oben. */
  --accent-green: #66E4AD;
  --accent-green-text: #4DE8A5; /* eigener, nicht an eine Figma-Variable
    gebundener Grünton speziell für Textauszeichnungen auf dunklem
    Hintergrund (m-feature-grid) — leicht anders als --accent-green, im
    Figma-File nicht als Variable benannt (nur als Rohwert im Text
    hinterlegt), evtl. mit Designerin gegenchecken ob das Absicht ist */
  --text-scroll-muted: rgba(106, 216, 168, 0.6); /* dritter, eigener Grünton
    speziell für den Scroll-Reveal-Text in m-text-scroll (startzustand vor
    dem Scrollen), exakt aus Figma (rgba, nicht an eine Variable gebunden) —
    weder --accent-green noch --accent-green-text, alle drei sind
    unterschiedliche Werte im Figma-File */

  /* --- Text-Farben (white-bg Kontext = Default) --------------------------- */
  --text-default-default: var(--grey-6);
  --text-default-subtlest: var(--grey-4);
  --text-default-disabled: var(--grey-2);

  --text-inverted-default: var(--grey-0);
  --text-inverted-subtlest: var(--grey-2);

  /* --- Type Scale: Font-Größen (Desktop / wird per Media Query überschrieben) --- */
  --fs-headline-decorative: 96px;
  --fs-h1: 80px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 28px;
  --fs-h5: 24px;
  --fs-h6: 20px;
  --fs-copy-display: 24px;
  --fs-copy-large: 20px;
  --fs-copy-small: 18px;
  --fs-button-small: 14px;
  --fs-overline: 14px;

  /* --- Font-Family & Weights ---------------------------------------------- */
  --font-base: "PP Telegraf", "PP Telegraf Fallback", Arial, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-ultrabold: 800;

  /* --- Spacing-Skala (8px Basis) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* --- Layout -------------------------------------------------------------- */
  --content-max-width: 1280px;
  --breakpoint-tablet: 900px;
  --breakpoint-mobile: 600px;
}

/* --- Dark Mode: folgt automatisch der OS-Einstellung (prefers-color-scheme),
   kein manueller Umschalter (User-Entscheidung, kein Figma-Dark-Design
   vorhanden — selbst entworfen).

   Nur die "white-bg Kontext"-Tokens (Default-Text/-Stroke/-Surface) werden
   gespiegelt, NICHT die bereits vorhandenen "dark-bg Kontext"/"inverted"-
   Tokens (stroke-dark-*, surface-dark-*, text-inverted-*) — die gehören zu
   Komponenten, die schon jetzt IMMER dunkel sind (m-feature-grid, m-contact,
   m-logo-wall, dunkler Header auf der Kontakt-Seite) und bleiben unverändert,
   damit sie sich weiterhin klar vom Rest der (jetzt auch dunklen) Seite
   abheben. Die Grey-Skala ist bereits symmetrisch angelegt (grey-0↔grey-6,
   grey-1↔grey-5, grey-2↔grey-4), die Werte unten sind exakt die Spiegelung
   der :root-Defaults weiter oben. */
@media (prefers-color-scheme: dark) {
  :root {
    --stroke-default: var(--grey-0);
    --stroke-subtlest: var(--grey-5);
    --stroke-subtler: var(--grey-4);

    --surface-light-default: var(--grey-6);
    --surface-light-subtlest: var(--grey-5);
    --surface-light-subtler: var(--grey-4);

    --text-default-default: var(--grey-0);
    --text-default-subtlest: var(--grey-2);
    --text-default-disabled: var(--grey-4);
  }
}

/* --- Responsive Type Scale: Tablet (<= 900px) ----------------------------- */
@media (max-width: 900px) {
  :root {
    --fs-headline-decorative: 56px;
    --fs-h1: 72px;
    --fs-h2: 32px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --fs-copy-display: 20px;
    --fs-copy-large: 18px;
    --fs-copy-small: 16px;
  }
}

/* --- Responsive Type Scale: Mobile (<= 600px) ----------------------------- */
@media (max-width: 600px) {
  :root {
    --fs-headline-decorative: 40px;
    --fs-h1: 40px;
    --fs-h2: 24px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-copy-display: 18px;
    --fs-copy-large: 16px;
    --fs-copy-small: 16px;
  }
}