/* =====================================================
   AI Revenue System — Design Tokens
   Quelle: leaderlogic.de styles.css (1:1 übernommen).
   HIER drehen für systemweite Änderungen an Farbe/Typo.
   ===================================================== */

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/TT-Norms-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/TT-Norms-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TT-Norms-Bold.woff2') format('woff2');
}

/* TT Norms hat eine "st"-/"ct"-Ligatur, die als Bruecke zwischen den Buchstaben
   erscheint (z.B. "Mustermann", "Ausstehend"). Global ALLE Ligaturen abschalten —
   1:1 der Fix von leaderlogic.de (styles.css). !important + universell, weil die
   `font:`-Kurzschreibweise font-variant-ligatures sonst zuruecksetzt. */
*, *::before, *::after {
  font-variant-ligatures: none !important;
}

:root {
  /* ---- Primitive (aus leaderlogic.de) ---- */
  --c-ink:          #ffffff;
  --c-ink-soft:     rgba(255,255,255,0.62);
  --c-ink-faint:    rgba(255,255,255,0.30);
  --c-line:         rgba(255,255,255,0.14);
  /* MarketLeaders-Palette: Akzent = Indigo-Blau (Landingpage), Töne Navy + Near-Black */
  --c-accent:       #4f46e5;   /* MarketLeaders-Blau */
  --c-accent-hi:    #635bef;   /* heller für Hover/Glow */
  --c-accent-ink:   #ffffff;   /* Text auf Akzent (Blau ist dunkel) */
  --c-accent-rgb:   79, 70, 229;
  --c-surface:      #16142e;   /* Navy-Karte */
  --c-surface-2:    #100e24;   /* dunkler */
  --c-surface-line: rgba(255,255,255,0.08);
  --c-black:        #060611;

  --font-tt: "TT Norms", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- Semantische Portal-Tokens (Jans Stellschrauben) ---- */
  --portal-accent:       var(--c-accent);
  --portal-accent-hover: var(--c-accent-hi);
  --portal-accent-ink:   var(--c-accent-ink);
  --portal-bg:           #06050f;   /* Near-Black mit Blaustich (MarketLeaders) */
  --portal-box-dot:      #16142e;   /* opake Kreis-Füllung */

  /* Timeline-Helligkeitsverlauf: Linie UND Kreis-Umrandungen nutzen exakt
     dieselben Farbwerte pro Zone (erledigt → heiß → nachleuchtend → aus) */
  --tl-done:   #3a3a3e;   /* erledigt: grau — nur der ✓-Haken trägt Akzent, Fokus liegt auf dem Aktuellen */
  --tl-hot:    #d8fd5b;                                     /* To-do + Kick-off: volle Helligkeit */
  --tl-after1: color-mix(in srgb, #d8fd5b 30%, #26262a);    /* leuchtet noch Richtung Fundament */
  --tl-after2: #3a3a3e;
  --tl-after3: #2c2c30;
  --portal-surface:      var(--c-surface);
  --portal-surface-2:    var(--c-surface-2);
  --portal-text:         var(--c-ink);
  --portal-text-soft:    var(--c-ink-soft);
  --portal-text-faint:   var(--c-ink-faint);
  --portal-line:         var(--c-surface-line);

  --heading-font:   var(--font-tt);
  --body-font:      var(--font-tt);
  --portal-h1-size: clamp(34px, 3.8vw, 52px);
  --portal-h1-weight: 500;
  --portal-h1-spacing: -0.5px;

  --kicker-size: 12px;
  --kicker-spacing: 0.14em;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --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;

  --shadow-card: 0 10px 40px rgba(0,0,0,0.35);
  --transition: 0.22s cubic-bezier(.4,0,.2,1);

  /* Formularfelder — Jans Präferenz: min. 19px Schrift, graue Flächen */
  --field-font-size: 17px;

  /* Vertikales Layout-Raster (4px-Basis) — EIN Rhythmus für alle Inhaltskarten:
     xs Titel→Pille · s Pille→Text · m Text→Aktion/Nachbar · l Block→Block */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --field-bg: rgba(255,255,255,0.055);
  --field-bg-focus: rgba(255,255,255,0.085);
}