/* ── @font-face: self-hosted (Kanon §7, kein CDN) ──────────────────── */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/syne-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/syne-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}

:root {
  /* ── Basis-Farben (Kanon §6 — niemals ändern) ─────────────────────── */
  --bg:           #080B12;
  --surface:      #161618;
  --border:       #232327;
  --primary:      #A8B2C8;
  --text:         #ECEEF2;
  --soft-cyan:    #67E8F9;
  --deep-blue:    #0B5CFF;
  --glass-bg:     rgba(22, 22, 24, 0.58);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ── Produktfarbe Mityvo Call ─────────────────────────────────────── */
  --accent:       #22C55E;
  --glow-accent:  rgba(34, 197, 94, 0.22);
  --glow-soft:    rgba(34, 197, 94, 0.10);

  /* ── Fonts ────────────────────────────────────────────────────────── */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --nav-height:    76px;
  --container-w:   1200px;
  --section-pad:   120px;
  --section-pad-m: 64px;

  /* ── Abstände (projektspezifisch, beibehalten) ────────────────────── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* ── Legacy-Aliasse (alte Namen → Kanon-Variablen) ────────────────── */
  --bg-deep:        var(--bg);
  --bg-card:        var(--glass-bg);
  --green:          var(--accent);
  --green-dim:      var(--glow-soft);
  --green-glow:     var(--glow-accent);
  --text-primary:   var(--text);
  --text-secondary: var(--primary);
  --border-green:   rgba(34, 197, 94, 0.3);
  --radius-card:    var(--radius-lg);
  --radius-btn:     var(--radius-sm);
  --font-headline:  var(--font-display);
  --max-width:      var(--container-w);
}