/* BoomControl — Basis-Theme (Abschnitt 2 des Briefs) */
:root {
  --bg:          #0A0A0A;
  --surface:     #121316;
  --surface-2:   #1A1C20;
  --border:      #26282E;
  --text:        #F5F5F4;
  --text-muted:  #9A9CA3;
  --accent:       #FE8600;
  --accent-hover: #FF9C33;
  --accent-press: #E07400;
  --accent-tint:  rgba(254, 134, 0, 0.12);
  --ignite: #D90036;
  --mod-1: #FFC531;
  --mod-2: #22D3EE;
  --mod-3: #A855F7;
  --ok:    #34D399;
  --warn:  #FBBF24;
  --error: #FF4D6D;
  --r-card: 20px;
  --r-pill: 999px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;
  --space-4: 24px; --space-5: 40px; --space-6: 64px;
  --section-y: clamp(96px, 12vw, 180px);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 700ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-feature-settings: "tnum";
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}