/* ============================================================
   tokens.css — Design-Tokens für incvis konzept-5
   Petrol + Bone Achse · System-Sprache
   ============================================================ */

:root {
  /* ─── Farbe ──────────────────────────────────────── */
  /* Tinte (dunkle Sektionen) */
  --ink:           #0E1116;
  --ink-2:         #1A1E26;
  --paper-on-ink:  #F4F1E9;
  --paper-dim:     #989389;

  /* Bone (helle Sektionen, warm) */
  /* Vorschau: --paper auf paper-2-Wert gesetzt, damit alle hellen Sektionen identisch warm wirken. */
  /* Original-Wert: #FAF8F2 */
  --paper:         #F0EDE3;
  --paper-2:       #F0EDE3;
  --ink-on-paper:  #14161D;
  --ink-dim:       #6E6F76;

  /* Hairlines */
  --rule-ink:      #2A2D36;
  --rule-paper:    #C5C0B5;

  /* Spot — Petrol (Mikro-Akzent, nie Flächenfarbe) */
  --spot:          #284651;
  --spot-hover:    #1F3741;
  --spot-on-ink:   #5E8290;
  --spot-soft:     rgba(40, 70, 81, 0.10);

  /* Akzent-Flag — Bernstein (Signal/Störer: Förder-Badges, Tags, Aufhänger; nie Fläche) */
  --accent-flag:      #E0A020;
  --accent-flag-ink:  #2A1A06;
  --accent-flag-soft: rgba(224, 160, 32, 0.16);

  /* ─── Typografie ─────────────────────────────────── */
  --font-display: 'General Sans', 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'General Sans', 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;

  --fs-display-xl: clamp(2.4rem, 6vw, 5.4rem);   /* Hero-Headline */
  --fs-display-l:  clamp(1.9rem, 3.6vw, 3rem);   /* H2 Section */
  --fs-display-m:  clamp(1.3rem, 2vw, 1.7rem);   /* H3 / Item-Title */
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-body-s:     0.875rem;
  --fs-mono:       0.8125rem;
  --fs-mono-s:     0.6875rem;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-mono:    1.4;

  --tracking-mono:  0.06em;
  --tracking-tight: -0.02em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Spacing-Skala ──────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ─── Layout ─────────────────────────────────────── */
  --container-max:     1320px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --grid-gap:          clamp(1rem, 2vw, 2rem);
  --nav-h:             64px;

  /* ─── Bewegung ───────────────────────────────────── */
  --dur-fast:    150ms;
  --dur-med:     300ms;
  --dur-slow:    600ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med:  0ms;
    --dur-slow: 0ms;
  }
}

/* ─── Webfonts (lokal hosten, DSGVO-konform) ──────── */
/* General Sans — Fontshare (Open Source, kommerziell nutzbar) */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Variable.woff2') format('woff2-variations'),
       url('../fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2-variations'),
       url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
/* JetBrains Mono — Apache 2.0 / OFL */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
       url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}