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

:root {
  /* ── Core neutrals (deep navy spectrum) ─────────────────── */
  --stg-ink-900:   #171224;   /* deepest, near-black navy */
  --stg-ink-800:   #211A36;   /* primary background */
  --stg-ink-700:   #332847;   /* surface / panel */
  --stg-ink-600:   #45365E;   /* surface raised */
  --stg-ink-500:   #75638E;   /* divider / secondary */
  --stg-ink-400:   #9884AD;   /* muted blue */
  --stg-ink-300:   #C9C0E4;   /* soft slate */
  --stg-ink-200:   #E9E4F2;   /* lightest slate */

  /* ── Signature warm sand (the brand accent) ─────────────── */
  --stg-sand-700:  #8C7B62;
  --stg-sand-500:  #EE8449;   /* PRIMARY ACCENT */
  --stg-sand-400:  #F2A06F;
  --stg-sand-300:  #F1A875;   /* warm gold-leaning */
  --stg-sand-200:  #F8F1ED;   /* cream surface */
  --stg-sand-100:  #F9F4F0;

  /* ── Secondary accents ───────────────────────────────────── */
  --stg-violet:    #9070E6;   /* link / discovery */
  --stg-rust:      #D4518F;   /* alert / emphasis (use sparingly) */

  /* Muted sage / resolved comments, paired with the navy and sand palette. */
  --stg-success:     #93B7A1;
  --stg-success-rgb: 147, 183, 161;

  /* ── 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(238, 132, 73, 0.22);
  --stg-divider-light:    rgba(23, 18, 36, 0.12);

  /* ── Application corners: shared by hub, dialogs and deck controls ── */
  --stg-radius-surface:   8px;   /* cards, panels, menus */
  --stg-radius-control:   6px;   /* fields, option cards, nested rows */
  --stg-radius-button:  999px;   /* pill actions; square icon buttons become circles */
  --stg-radius-compact:   4px;   /* small controls; metadata labels use labels.css */

  /* ── Workspace only: outside artboards, never part of the content ── */
  --stg-workspace-bg: #14101E;
  --stg-workspace-dots: radial-gradient(circle, rgba(201, 192, 228, .20) 1px, transparent 1.2px);
  --stg-workspace-gradient: linear-gradient(145deg, #261D39 0%, #1D162D 52%, #130F1C 100%);
  --stg-workspace-background: var(--stg-workspace-dots) 0 0 / 24px 24px repeat, var(--stg-workspace-gradient) 0 0 / 100% 100% no-repeat var(--stg-workspace-bg);
  --stg-artboard-edge: rgba(201, 192, 228, .24);

  /* ── Focus glow: the dashboard composer is the shared reference ── */
  --stg-glow-rgb: 238, 132, 73;
  --stg-glow-highlight-rgb: 246, 179, 139;
  --stg-glow-blur: 24px;
  --stg-glow-opacity: .8;
  --stg-glow-spread: 5px;
  --stg-glow-line: 1.5px;
  --stg-glow-duration: 18s;
  --stg-glow-stops: transparent 0deg, rgba(var(--stg-glow-rgb), .05) 200deg, rgba(var(--stg-glow-rgb), .28) 265deg, rgba(var(--stg-glow-highlight-rgb), .85) 310deg, rgba(var(--stg-glow-rgb), .2) 340deg, transparent 360deg;
  --stg-glow-halo-width: 48px;
  --stg-glow-trail-width: 8px;
  --stg-glow-trail-blur: 3px;
  --stg-glow-shadow: 0 0 var(--stg-glow-blur) var(--stg-glow-spread) rgba(var(--stg-glow-rgb), .2), 0 0 calc(var(--stg-glow-blur) * 2.3) rgba(var(--stg-glow-rgb), .12);

  /* ── Input focus: one calm sand edge for every UI field ──── */
  --stg-field-focus-border: rgba(238, 132, 73, .55);
  --stg-field-focus-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 0 0 4px rgba(238, 132, 73, .1);
  --stg-field-focus-duration: .32s;
  --stg-field-focus-ease: ease;
  --stg-field-transition: border-color var(--stg-field-focus-duration) var(--stg-field-focus-ease), box-shadow var(--stg-field-focus-duration) var(--stg-field-focus-ease), background-color var(--stg-field-focus-duration) var(--stg-field-focus-ease);

  /* ── 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:            48px;
  --stg-pad-top:          64px;
  --stg-pad-bottom:       48px;
  --stg-title-gap:        52px;
  --stg-item-gap:         28px;
  --stg-guard:            64px;   /* Freiraum unter Headline / über Fußzeile, keine sichtbare Umrahmung */

  /* ── Type families & weights ────────────────────────────── */
  --stg-font:             "DWS Sans", "DWS Sans",
                          "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Schnitt-Name exakt wie in PowerPoint (= TTF-Datei): DWS Sans.
     GENAU EIN Schnitt — kein Bold/Italic/Light. Der Name wählt den Schnitt. */
  --stg-w-thin:           300;  /* @kind font */
  --stg-w-light:          400;  /* @kind font */
  --stg-w-roman:          400;  /* @kind font */
  --stg-w-medium:         400;  /* @kind font */
  --stg-w-bold:           700;  /* @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 */
}

/* Compact 3.5 scale / 9 September 2026. Legacy design versions keep their scale. */
html[data-stg-design="3.5"] {
  --stg-type-display: 84px;
  --stg-type-h1: 44px;
  --stg-type-h2: 36px;
  --stg-type-h3: 28px;
  --stg-type-h4: 22px;
  --stg-type-body: 20px;
  --stg-type-small: 14px;
  --stg-type-eyebrow: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stg-field-focus-duration: 0s; }
}
@media (forced-colors: active) {
  :root { --stg-field-focus-border: Highlight; --stg-field-focus-shadow: none; }
}

/* ── 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;
}

/* Xtrackers identity. Technical stg token names remain for engine compatibility. */
:root{--xt-purple:#5F4A99;--xt-purple-deep:#4A3A7A;--xt-amber:#EE8449;--xt-teal:#56AEB1;--xt-lime:#ABD654;--xt-pink:#D4518F;--xt-slab:"DWS Slab",Georgia,serif;--stg-pad-x:115px;--stg-font:"DWS Sans",Arial,sans-serif;--stg-radius-surface:12px;--stg-radius-control:8px}