/* Design Tokens — Philipp Marenne
   Quelle: DS philippmarenne.de (claude.ai Artifact), tokens.json v2 */

:root {
  /* Palette */
  --blue-950: #121a28;
  --blue-900: #1c2738;
  --blue-800: #3d4d62;
  --blue-600: #3a5f8f;
  --blue-500: #5a7d9e;
  --blue-400: #8aa9c4;
  --blue-100: #e8eef5;
  --blue-50:  #f2f5f9;
  --white:    #fdfcf9;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-200: #e5e7eb;

  /* Semantic — Hell (Default) */
  --color-bg:             var(--white);
  --color-raised:         var(--white);
  --color-text:           var(--blue-900);
  --color-text-muted:     var(--gray-500);
  --color-heading:        var(--blue-950);
  --color-lead:           var(--blue-800);
  --color-link:           var(--blue-600);
  --color-link-hover:     var(--blue-500);
  --color-border:         var(--gray-200);
  --color-border-strong:  rgba(18, 26, 40, 0.16);
  --color-line:           var(--blue-500);
  --color-footer-border:  var(--gray-200);
  --color-surface:        rgba(255, 255, 255, 0.6);
  --color-header-bg:      rgba(253, 252, 249, 0.78);
  --color-header-border:  rgba(18, 26, 40, 0.06);
  --color-accent-line:    rgba(58, 95, 143, 0.22);
  --color-chip-bg:        rgba(58, 95, 143, 0.08);
  --color-chip-border:    rgba(58, 95, 143, 0.22);
  --color-ghost-border:   rgba(18, 26, 40, 0.12);
  --color-focus:          var(--blue-600);

  /* Markenblock — gleich in beiden Themes */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  #335580;
  --color-primary-to:     #2e4a6e;
  --color-on-primary:     var(--white);

  /* Dunkles Referenzen-Band */
  --color-band-from: #161e2e;
  --color-band-mid:  #1a2639;
  --color-band-to:   #152032;
  --color-band-edge: rgba(255, 255, 255, 0);

  /* Diagramme / Schaubilder */
  --viz-1:     var(--blue-600);
  --viz-2:     #a8641a;
  --viz-3:     #5d7a4f;
  --viz-4:     #8a4f6e;
  --viz-muted: var(--gray-400);
  --viz-grid:  var(--gray-200);
  --viz-axis:  var(--gray-500);

  /* Schatten */
  --shadow:               0 2px 16px rgba(18, 26, 40, 0.06);
  --shadow-lg:            0 24px 48px -24px rgba(18, 26, 40, 0.14);
  --shadow-primary:       0 1px 2px rgba(18, 26, 40, 0.12);
  --shadow-primary-hover: 0 2px 6px rgba(18, 26, 40, 0.14);

  /* Radien */
  --radius-sm:   6px;
  --radius-icon: 7px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Abstände */
  --space-chip-gap:        0.55rem;
  --space-stack-s:         0.75rem;
  --space-heading-content: 1.25rem;
  --space-gutter:          1.75rem;
  --space-card:            2rem;
  --space-hero-gap:        2.75rem;
  --space-section:         4rem;

  /* Layout & Typografie */
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --max:       1080px;
  --prose-max: 700px;
  --bp-wide:   900px;
}

/* ── Dunkel-Theme: Systempräferenz ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:             var(--blue-950);
    --color-raised:         #172133;
    --color-text:           var(--blue-100);
    --color-text-muted:     var(--blue-400);
    --color-heading:        #ecf1f8;
    --color-lead:           var(--blue-100);
    --color-link:           var(--blue-400);
    --color-link-hover:     #aec5da;
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-strong:  rgba(255, 255, 255, 0.16);
    --color-line:           var(--blue-400);
    --color-footer-border:  rgba(255, 255, 255, 0.08);
    --color-surface:        rgba(255, 255, 255, 0.05);
    --color-header-bg:      rgba(18, 26, 40, 0.85);
    --color-header-border:  rgba(255, 255, 255, 0.07);
    --color-accent-line:    rgba(138, 169, 196, 0.25);
    --color-chip-bg:        rgba(138, 169, 196, 0.12);
    --color-chip-border:    rgba(138, 169, 196, 0.33);
    --color-ghost-border:   rgba(255, 255, 255, 0.12);
    --color-focus:          var(--blue-400);

    --color-band-from: #0d1320;
    --color-band-mid:  #0f1625;
    --color-band-to:   #0c121d;
    --color-band-edge: rgba(255, 255, 255, 0.07);

    --viz-1:     var(--blue-400);
    --viz-2:     #d9a15a;
    --viz-3:     #9fbd8c;
    --viz-4:     #d39bba;
    --viz-muted: var(--blue-500);
    --viz-grid:  rgba(255, 255, 255, 0.08);
    --viz-axis:  var(--blue-400);

    --shadow:               0 2px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg:            0 24px 48px -24px rgba(0, 0, 0, 0.45);
    --shadow-primary:       0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-primary-hover: 0 2px 6px rgba(0, 0, 0, 0.5);
  }
}

/* ── Dunkel-Theme: manueller Umschalter ────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:             var(--blue-950);
  --color-raised:         #172133;
  --color-text:           var(--blue-100);
  --color-text-muted:     var(--blue-400);
  --color-heading:        #ecf1f8;
  --color-lead:           var(--blue-100);
  --color-link:           var(--blue-400);
  --color-link-hover:     #aec5da;
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.16);
  --color-line:           var(--blue-400);
  --color-footer-border:  rgba(255, 255, 255, 0.08);
  --color-surface:        rgba(255, 255, 255, 0.05);
  --color-header-bg:      rgba(18, 26, 40, 0.85);
  --color-header-border:  rgba(255, 255, 255, 0.07);
  --color-accent-line:    rgba(138, 169, 196, 0.25);
  --color-chip-bg:        rgba(138, 169, 196, 0.12);
  --color-chip-border:    rgba(138, 169, 196, 0.33);
  --color-ghost-border:   rgba(255, 255, 255, 0.12);
  --color-focus:          var(--blue-400);

  --color-band-from: #0d1320;
  --color-band-mid:  #0f1625;
  --color-band-to:   #0c121d;
  --color-band-edge: rgba(255, 255, 255, 0.07);

  --viz-1:     var(--blue-400);
  --viz-2:     #d9a15a;
  --viz-3:     #9fbd8c;
  --viz-4:     #d39bba;
  --viz-muted: var(--blue-500);
  --viz-grid:  rgba(255, 255, 255, 0.08);
  --viz-axis:  var(--blue-400);

  --shadow:               0 2px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg:            0 24px 48px -24px rgba(0, 0, 0, 0.45);
  --shadow-primary:       0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-primary-hover: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  color-scheme: light;
}