/* ============================================================
   ki-sichtbarkeit.io · Design-Tokens v1 (MVP)
   Vince, 2026-09-10. Konzept: Konversions-Kategorie-Seite mit
   Pink `#BC1E54` als einzigem PP-Wiedererkennungs-Anker.
   ============================================================ */

/* Inter Variable Font, Latin-Subset (lokal, kein Google-Fonts-CDN) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/shared/fonts/inter-latin-variable.woff2') format('woff2-variations');
}

:root {

  /* --- Flächen (neutral, konversions-freundlich) ---------- */
  --paper:        #FDFCFA;   /* Grundfläche (fast weiß, warmer Ton, kein PP-Bordeaux) */
  --panel:        #F3F0EB;   /* leicht wärmerer Grund für abgesetzte Blöcke        */
  --line:         #E5E0D8;   /* Hairline-Trenner                                    */

  /* --- Text ---------------------------------------------- */
  --ink:          #0A0908;   /* Fließtext, Kontrast auf paper > 20:1                */
  --sub:          #5A554E;   /* Sekundärtext, > 6:1 AA auf paper                    */

  /* --- Pink (PP-Wiedererkennungs-Anker, nur an 2 Stellen) - */
  --pink:         #BC1E54;   /* CTA-Button-Fläche                                   */
  --pink-text:    #8E1640;   /* Dunklere Pink-Variante für Text-Verwendung (AA)     */
  --on-pink:      #FFFFFF;   /* Weiß auf Pink-Button (11.4:1 AAA)                   */

  /* --- Font ---------------------------------------------- */
  --font: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Größen (max 4 Typo-Stufen, Apple-Disziplin) --------- */
  --fs-display:   clamp(38px, 5.5vw, 60px);   /* Hero-H1                */
  --fs-h2:        clamp(24px, 3vw, 36px);     /* Section-Titel          */
  --fs-body:      17px;                        /* Body                   */
  --fs-small:     14px;                        /* Micro / Meta           */
  --fs-eyebrow:   13px;                        /* Eyebrow (uppercase)    */

  --lh-display:   1.05;
  --lh-h2:        1.15;
  --lh-body:      1.6;
  --measure:      64ch;

  --ls-display:   -0.02em;
  --ls-h2:        -0.01em;
  --ls-eyebrow:   0.14em;
  --eyebrow-color: var(--sub);   /* Eyebrow neutral, Pink bleibt strikt auf CTA + Wortmarke */

  /* --- Form ---------------------------------------------- */
  --radius:       6px;      /* Standard                                             */
  --radius-lg:    12px;     /* Karten, Formular-Blöcke                              */

  /* --- Raster (8er) -------------------------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 72px;
  --s-6: 96px;
  --s-7: 128px;

  /* --- Bewegung ------------------------------------------ */
  --rv-dur:       0.6s;
  --rv-ease:      cubic-bezier(.22, 1, .36, 1);
  --rv-y:         24px;

  /* --- Touch --------------------------------------------- */
  --touch-min:    44px;
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  :root { --rv-dur: 0.001s; --rv-y: 0; }
}