/* =========================================================================
 * TipTop-KI · Design Tokens v1.1
 * Source of truth: brand/colors/brand_colors.json + live index.html
 * ========================================================================= */

/* --- Font loading (Google Fonts CDN — per Brand v1.1) ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* ---------- Primary palette (Brand v1.1) ---------- */
  --graphit:     #121417;  /* Hauptgrund, Wortmarke positiv */
  --gold:        #C9A24B;  /* EINZIGER Akzent. Brücke, Highlights, Borders-featured */
  --nebel:       #F4F2ED;  /* Primärtext, heller Ground */
  --signal-cyan: #3FD9CF;  /* Reserviert / technisch, zurückhaltend einsetzen */
  --stein:       #6A6A6A;  /* Sekundärtext, Eyebrow-Grau */

  /* ---------- Derived / implementation tokens (aus Live-Seite) ---------- */
  --linie:       #1F2226;  /* Subtile Borders auf Graphit */
  --elevated:    #1A1D21;  /* Cards, erhöhte Flächen */
  --tief:        #0A0C0E;  /* Kino-Schwarz, Intro-Overlay, Kapitel-Break-Mitte */

  /* Sub-brand accents — NICHT auf Dachmarke mischen */
  --kanal-tiefenzeit: #4A9EFF;
  --kanal-wlz:        #22C55E;
  --kanal-tiptop:     #C8A96E;
  --kanal-julie:      #A855F7;
  --b2b-orange:       #FF6B35;  /* CTA "Basis buchen", Nav-Kontakt */

  /* Alpha tokens — für Layering auf Graphit-Hintergrund */
  --nebel-85: rgba(244,242,237,0.85);
  --nebel-65: rgba(244,242,237,0.65);
  --nebel-55: rgba(244,242,237,0.55);
  --nebel-40: rgba(244,242,237,0.40);
  --nebel-15: rgba(244,242,237,0.15);
  --nebel-10: rgba(244,242,237,0.10);
  --nebel-08: rgba(244,242,237,0.08);
  --nebel-04: rgba(244,242,237,0.04);

  --gold-30: rgba(201,162,75,0.30);
  --gold-15: rgba(201,162,75,0.15);
  --gold-08: rgba(201,162,75,0.08);
  --gold-04: rgba(201,162,75,0.04);

  /* ---------- Type families ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type scale (aus Live-Seite · 1920 Grid) ---------- */
  --fs-display:    clamp(2.5rem, 4.5vw, 4rem);     /* Cinema-Hero H1 */
  --fs-h1:         clamp(2rem, 4.5vw, 3rem);       /* Section H2 */
  --fs-h2:         28px;                           /* Preis-Headline */
  --fs-h3:         22px;                           /* Leistung, Demo-Tile */
  --fs-h4:         17px;                           /* Kontakt-Method-Value */
  --fs-body-lg:    17px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-eyebrow:    12px;
  --fs-mono-xs:    11px;

  --lh-display:    1.02;
  --lh-heading:    1.1;
  --lh-body:       1.6;

  --tracking-tight: -0.025em;  /* Headlines, Wortmarke */
  --tracking-wide:   0.15em;   /* Eyebrows UPPERCASE */
  --tracking-mono:   0.08em;   /* Mono-Labels */

  /* ---------- Spacing / radius / shadow ---------- */
  --radius-sm:  4px;     /* Buttons, Chips, Badges */
  --radius-md:  8px;     /* Cards, Inputs, Modals */
  --radius-lg:  12px;    /* Hero-Media, Promo-Box alt */
  --radius-pill: 100px;  /* Pill-Badges */

  --shadow-card:     0 8px 24px rgba(0,0,0,0.4);
  --shadow-lift:     0 20px 60px rgba(0,0,0,0.35);
  --shadow-cinema:   0 16px 64px rgba(0,0,0,0.5);
  --shadow-gold-ring:0 0 0 1px rgba(201,162,75,0.3);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:   0.2s;
  --dur-med:    0.3s;
  --dur-slow:   0.8s;
}

/* =========================================================================
 * Semantic element defaults — Dark-First (Graphit ground)
 * ========================================================================= */
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--nebel);
  background: var(--graphit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }

p     { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--nebel-85); }
small { font-size: var(--fs-body-sm); color: var(--nebel-55); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* ----- Eyebrow (Signaturelement — immer mit goldenem Gedankenstrich) ----- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stein);
  display: inline-block;
  margin-bottom: 20px;
}
.eyebrow::before { content: "— "; color: var(--gold); }

/* ----- Gold-accent (zweite Headline-Zeile im Creator-Ton) ----- */
.gold-accent { color: var(--gold); }