/* ──────────────────────────────────────────────────────────────
   stg / Design Tokens
   Derived from the source presentation theme
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Core neutrals (deep navy spectrum) ─────────────────── */
  --stg-ink-900:   #141C26;   /* deepest, near-black navy */
  --stg-ink-800:   #1E2837;   /* primary background */
  --stg-ink-700:   #28374A;   /* surface / panel */
  --stg-ink-600:   #2C3F58;   /* surface raised */
  --stg-ink-500:   #556F89;   /* divider / secondary */
  --stg-ink-400:   #6583AC;   /* muted blue */
  --stg-ink-300:   #98ADC8;   /* soft slate */
  --stg-ink-200:   #DDE3ED;   /* lightest slate */

  /* ── Signature warm sand (the brand accent) ─────────────── */
  --stg-sand-700:  #8C7B62;
  --stg-sand-500:  #C8B59A;   /* PRIMARY ACCENT */
  --stg-sand-400:  #D4C4AB;
  --stg-sand-300:  #E0BF92;   /* warm gold-leaning */
  --stg-sand-200:  #E9E1D7;   /* cream surface */
  --stg-sand-100:  #F5F0E8;

  /* ── Secondary accents ───────────────────────────────────── */
  --stg-violet:    #59599C;   /* link / discovery */
  --stg-rust:      #D5714B;   /* alert / emphasis (use sparingly) */

  /* ── Pure ────────────────────────────────────────────────── */
  --stg-white:     #FFFFFF;
  --stg-black:     #000000;

  /* ── Semantic tokens ────────────────────────────────────── */
  --stg-bg:               var(--stg-ink-800);
  --stg-bg-deep:          var(--stg-ink-900);
  --stg-bg-light:         var(--stg-sand-200);
  --stg-bg-paper:         var(--stg-white);

  --stg-fg:               var(--stg-white);
  --stg-fg-on-light:      var(--stg-ink-900);
  --stg-fg-muted:         var(--stg-ink-300);
  --stg-fg-quiet:         var(--stg-ink-400);

  --stg-accent:           var(--stg-sand-500);
  --stg-accent-warm:      var(--stg-sand-300);
  --stg-rule:             var(--stg-sand-500);
  --stg-divider:          rgba(200, 181, 154, 0.22);
  --stg-divider-light:    rgba(20, 28, 38, 0.12);

  /* ── Type scale (slide-grade, base = 1920×1080, v2.0) ───── */
  --stg-type-display:     124px;  /* Cover-Headline — sand */
  --stg-type-h1:          62px;   /* Slide-Headline — _VERSALIEN, sand */
  --stg-type-h2:          42px;   /* große Content-Headline — weiß */
  --stg-type-h3:          32px;   /* Card-/Block-Headline — weiß */
  --stg-type-h4:          25px;   /* kleine Content-Headline — weiß */
  --stg-type-body:        23px;   /* Body */
  --stg-type-small:       18px;   /* Fußnote / Label */
  --stg-type-eyebrow:     18px;   /* Tagline — VERSALIEN im ink-900-Kasten */

  /* ── Spacing scale ──────────────────────────────────────── */
  --stg-s-1:              8px;
  --stg-s-2:              16px;
  --stg-s-3:              24px;
  --stg-s-4:              32px;
  --stg-s-5:              48px;
  --stg-s-6:              64px;
  --stg-s-7:              96px;
  --stg-s-8:              120px;

  /* ── Layout (slide canvas) ──────────────────────────────── */
  --stg-pad-x:            100px;
  --stg-pad-top:          100px;
  --stg-pad-bottom:       80px;
  --stg-title-gap:        52px;
  --stg-item-gap:         28px;
  --stg-guard:            48px;   /* Schutzzone: Mindestabstand unter Headline / über Fußzeile */

  /* ── Type families & weights ────────────────────────────── */
  --stg-font:             "NeueHaasDisplay-Roman", "Neue Haas Display",
                          "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Schnitt-Name exakt wie in PowerPoint (= TTF-Datei): NeueHaasDisplay-Roman.
     GENAU EIN Schnitt — kein Bold/Italic/Light. Der Name wählt den Schnitt. */
  --stg-w-thin:           400;  /* @kind font */
  --stg-w-light:          400;  /* @kind font */
  --stg-w-roman:          400;  /* @kind font */
  --stg-w-medium:         400;  /* @kind font */
  --stg-w-bold:           400;  /* @kind font */

  /* ── Tracking — v2.0: Kerning IMMER normal, kein Tracking ── */
  --stg-track-tight:      0;  /* @kind other */
  --stg-track-snug:       0;  /* @kind other */
  --stg-track-normal:     0;  /* @kind other */
  --stg-track-wide:       0;  /* @kind other */
  --stg-track-wider:      0;  /* @kind other */
}

/* ── Base reset for design-system surface ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--stg-font);
  font-weight: var(--stg-w-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}