/* =====================================================================
   Datenstrom Design System — Colors & Type
   Source: Datenstrom Brand Basics (Beta).fig
   ===================================================================== */

/* ---------- Web fonts --------------------------------------------------
   Primary brand face: Futura LT W1G (licensed — not included).
   Fallback / Google-Fonts companion: League Spartan.
   Futura files were NOT successfully uploaded (see README). If you have
   them, drop them into /fonts/ and uncomment the @font-face block below. */

/* League Spartan lokal (DSGVO: kein Font-CDN). Dieselben Dateien, die der Prototyp über Bunny lädt.
   Ablage in static/fonts/, Quelle und Lizenz siehe static/fonts/README.md. */
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/*
@font-face {
  font-family: 'Futura LT W1G';
  src: url('../fonts/FuturaLTW1G-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura LT W1G';
  src: url('../fonts/FuturaLTW1G-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura LT W1G';
  src: url('../fonts/FuturaLTW1G-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura LT W1G';
  src: url('../fonts/FuturaLTW1G-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
*/

:root {
  /* ---------- Brand colors (Datenstrom "DS" scale) --------------------
     DS1 → DS4 are the primary blues. They go from a mid steel-blue
     to near-black. Signal (green) is the single accent / CTA colour.
     "Signal rot" (red) is only used on the time-boxed Lead-Kampagne. */

  --ds-1:        rgb(53, 69, 100);        /* #354564  — primary brand blue */
  --ds-2:        rgb(35, 49, 73);         /* #233149  — default surface / BG */
  --ds-3:        rgb(25, 33, 50);         /* #192132  — deepest blue */
  --ds-4:        rgb(0, 0, 0);            /* #000000  — text on light */

  /* alt blue tones seen in ads/mockups */
  --ds-1-alt:    rgb(48, 64, 93);
  --ds-2-alt:    rgb(44, 59, 86);
  --ds-3-alt:    rgb(39, 54, 79);

  /* Signal accents */
  --signal:      rgb(144, 255, 75);       /* #90FF4B — primary CTA / highlight */
  --signal-2:    rgb(133, 243, 65);
  --signal-3:    rgb(121, 231, 54);
  --signal-4:    rgb(110, 219, 42);
  --signal-5:    rgb(98, 208, 29);
  --signal-tint: rgb(176, 255, 126);      /* hover / lighter */

  /* Campaign accent (used sparingly, for Lead-Kampagne) */
  --campaign-red: rgb(221, 13, 13);       /* #DD0D0D */

  /* Neutrals */
  --white:       #ffffff;
  --bg-soft:     rgb(238, 243, 247);      /* light app surface */
  --border:      rgb(196, 196, 196);      /* keyline grey / figma page bg */
  --muted:       rgb(57, 57, 57);         /* soft body text */
  --ink:         rgb(29, 29, 27);         /* near-black body */

  /* Shadows (from Figma fills) */
  --shadow-sm:   0 4px 4px 0 rgba(0,0,0,0.25);
  --shadow-md:   0 8px 24px 0 rgba(0,0,0,0.18);
  --shadow-lg:   0 20px 60px -20px rgba(0,0,0,0.45);

  /* ---------- Semantic tokens (use these in product UIs) -------------- */
  --bg:          var(--ds-2);             /* default app background */
  --bg-alt:      var(--ds-1);
  --bg-inverse:  var(--white);
  --surface:     var(--ds-1);
  --on-bg:       var(--white);
  --on-surface:  var(--white);
  --on-light:    var(--ink);
  --fg:          var(--white);
  --fg-muted:    rgba(255,255,255,0.72);
  --fg-subtle:   rgba(255,255,255,0.5);
  --accent:      var(--signal);
  --accent-hover:var(--signal-tint);
  --on-accent:   var(--ds-2);             /* high-contrast text on green */
  --link:        var(--signal);
  --danger:      var(--campaign-red);

  /* ---------- Type ---------------------------------------------------- */
  --font-display: 'Futura LT W1G', 'League Spartan', 'Futura', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'League Spartan', 'Futura LT W1G', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights as used in the brand file */
  --fw-book:      400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-xbold:     800;

  /* Tracking — headlines in the lead campaign carry 0.05–0.10em */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.06em;
  --tracking-caps:    0.10em;

  /* Scale — calibrated for 16px root; headlines sit large + tight */
  --fs-display:  clamp(64px, 8vw, 150px);
  --fs-h1:       clamp(44px, 5vw, 80px);
  --fs-h2:       clamp(32px, 3.6vw, 60px);
  --fs-h3:       clamp(24px, 2.4vw, 40px);
  --fs-h4:       22px;
  --fs-body-lg:  20px;
  --fs-body:     18px;
  --fs-body-sm:  16px;
  --fs-caption:  14px;
  --fs-eyebrow:  13px;

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-body:     1.45;
  --lh-loose:    1.6;

  /* ---------- Spacing / radius / elevation --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-thick: 12px;    /* campaign frame border */
}

/* =====================================================================
   Semantic typography (tag-level)
   ===================================================================== */

.ds-body, body.ds {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-bg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
}

.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
}

.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.ds-h4, h4.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.ds-lede {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.ds-p, p.ds {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.ds-small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.ds-caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Eyebrow / pill labels — small, caps, tracked, used on pills and section intros */
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Code / mono */
.ds-code, code.ds {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* =====================================================================
   Core component primitives
   ===================================================================== */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
  text-decoration: none;
}
.ds-btn:hover    { background: var(--accent-hover); }
.ds-btn:active   { transform: translateY(1px); }
.ds-btn--ghost {
  background: transparent;
  color: var(--on-bg);
  border: 2px solid var(--on-bg);
}
.ds-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.ds-btn--solid-dark { background: var(--ds-2); color: var(--white); }

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.ds-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--on-surface);
  padding: var(--space-6);
}

.ds-input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--on-bg);
  width: 100%;
}
.ds-input::placeholder { color: var(--fg-subtle); }
.ds-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(144,255,75,0.25);
}