/* ============================================================
   threeline · Brand Foundation
   ------------------------------------------------------------
   Globale Brand-Tokens basierend auf dem Landing-Design.
   Definiert NEUE Variablen (--brand-*) — ueberschreibt KEINE
   bestehenden Variablen aus style.css. Risikofrei einbindbar.
   Wird erst sichtbar wenn ein Element die brand-* Variablen
   oder die utility-Klassen verwendet.
   ============================================================ */

/* Google Fonts: Space Grotesk (Display) + Inter (Body) + JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Farben === */
  --brand-base:   #161616;  /* Hintergrund dunkel */
  --brand-base-2: #0e0e0e;  /* etwas dunkler fuer Section-Reset */
  --brand-card:   #1c1c1c;  /* Card-Background */
  --brand-off:    #F6F6F6;  /* Text hell */
  --brand-accent: #FF4E45;  /* Brand-Rot */
  --brand-muted:  #7B7B7B;  /* Text gedaempft */
  --brand-line:   rgba(123,123,123,.18);  /* dezente Trennlinie */

  /* === Typo === */
  --brand-display: 'Space Grotesk', system-ui, sans-serif;
  --brand-body:    'Inter', system-ui, sans-serif;
  --brand-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* === Motion === */
  --brand-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   Mini-Mark — drei rote Bars, links neben Section-Eyebrow
   Skaliert mit dem font-size des Eltern-Elements (em-basiert).
   Verwendung:
     <div class="brand-head-row">
       <div class="brand-mark"><span></span><span></span><span></span></div>
       <p class="brand-eyebrow">SECTION TITLE</p>
     </div>
   ============================================================ */
.brand-head-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
}
.brand-mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.brand-mark span {
  display: block;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 999px;
}
.brand-mark span:nth-child(1) { width: 10px; }
.brand-mark span:nth-child(2) { width: 16px; }
.brand-mark span:nth-child(3) { width: 7px; }

/* ============================================================
   Eyebrow — Mono, klein, GROSSBUCHSTABEN, accent-farbig
   ============================================================ */
.brand-eyebrow {
  font-family: var(--brand-mono);
  font-size: .78rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0;
}

/* ============================================================
   Headline — Space Grotesk, gross, tight
   ============================================================ */
.brand-h2 {
  font-family: var(--brand-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--brand-off);
  margin: 0;
}