:root {
  /* ── Surfaces ── */
  --surface-obsidian:          #0A0A0A;
  --surface-charcoal:          #1A1A1A;
  --surface:                   #131313;
  --surface-container-low:     #1C1B1B;
  --surface-container:         #201F1F;
  --surface-container-high:    #2A2A2A;
  --surface-container-highest: #353534;

  /* ── On-Surface ── */
  --on-surface:         #E5E2E1;
  --on-surface-variant: #BBCAC5;
  --pure-white:         #FFFFFF;

  /* ── Brand Colors ── */
  --electric-cyan:  #5CE6D1;
  --neon-magenta:   #E60063;
  --laser-yellow:   #DFDC01;

  /* ── Borders ── */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --outline:        #859490;

  /* ── Glow ── */
  --glow-cyan:          0 0 12px rgba(92, 230, 209, 0.30);
  --glow-cyan-strong:   0 0 24px rgba(92, 230, 209, 0.50);
  --glow-magenta:       0 0 12px rgba(230, 0, 99, 0.30);
  --glow-magenta-strong:0 0 24px rgba(230, 0, 99, 0.50);
  --glow-yellow:        0 0 12px rgba(223, 220, 1, 0.30);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Type Scale ── */
  --text-display:  clamp(48px, 8vw, 72px);
  --text-h1:       clamp(32px, 5vw, 48px);
  --text-h2:       clamp(24px, 3.5vw, 36px);
  --text-h3:       clamp(18px, 2.5vw, 24px);
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-label:    12px;

  /* ── Spacing (4px grid) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Layout ── */
  --container-max:    1200px;
  --gutter:           24px;
  --margin-desktop:   48px;
  --margin-mobile:    16px;

  /* ── Radius ── */
  --radius: 0px;

  /* ── Transitions ── */
  --transition: 200ms ease;
  --transition-slow: 400ms ease;
}

/* ── LANGUAGE TOGGLE (CSS-only, checkbox #lang-toggle drives all .lang-de/.lang-en) ── */
.lang-switch { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.lang-en { display: none; }

.lang-switch:checked ~ * .lang-de,
.lang-switch:checked ~ .lang-de { display: none; }
.lang-switch:checked ~ * .lang-en,
.lang-switch:checked ~ .lang-en { display: revert; }

.lang-toggle-label .lang-toggle-de { display: none; }
.lang-toggle-label .lang-toggle-en { display: inline; }
.lang-switch:checked ~ * .lang-toggle-label .lang-toggle-de { display: inline; }
.lang-switch:checked ~ * .lang-toggle-label .lang-toggle-en { display: none; }

.lang-toggle-label {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; user-select: none;
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 0;
  padding: .45rem .7rem; line-height: 1;
}
.lang-toggle-label:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.lang-globe { width: 1em; height: 1em; }