/* ═══════════════════════════════════════════════════════════════
   Theme: Modernist
   Flach, architektonisch, Archivo. Heller Grund, ein Akzent,
   Radius 0, kräftige 2px-Linien. Keine Abhängigkeiten außer der Schrift.

   Ein Theme definiert ausschließlich Variablen — die Komponenten in
   style.css lesen diese. Neues Theme = neue Datei nach diesem Muster.
   ═══════════════════════════════════════════════════════════════ */

/* Schriften werden lokal geladen (static/fonts/fonts.css) — keine externe Verbindung. */

:root {
  /* ── Grundfarben ──────────────────────────────────────────── */
  --color-bg:      #f3f2f2;
  --color-surface: #eae9e9;
  --color-text:    #201e1d;
  --color-accent:  #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* ── Tonale Rampen (OKLCH-basiert, gleiche Helligkeitsstufen) ── */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* ── Typografie ───────────────────────────────────────────── */
  --font-heading:        "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body:           "Archivo", system-ui, sans-serif;

  /* ── Abstände ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radien (bewusst kantig) ──────────────────────────────── */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* ── Schatten ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* ══════════════════════════════════════════════════════════
     Brücke zu den bestehenden Komponenten-Variablen.
     Werden von siteStyleOverrides (Admin-Farbe) überschrieben.
     ══════════════════════════════════════════════════════════ */
  --primary:       var(--color-accent);
  --primary-dark:  var(--color-accent-700);
  --primary-mid:   var(--color-accent-600);
  --primary-light: var(--color-accent-100);
  --grad-btn:      var(--color-accent);

  --accent-orange: var(--color-accent-600);
  --accent-green:  #2f7d32;
  --danger:        var(--color-accent-700);

  --bg:          var(--color-bg);
  --surface:     #ffffff;
  --surface-2:   var(--color-surface);
  --border:      var(--color-divider);
  --border-soft: color-mix(in srgb, var(--color-text) 18%, transparent);

  --text:       var(--color-text);
  --text-muted: color-mix(in srgb, var(--color-text) 62%, transparent);
  --text-light: color-mix(in srgb, var(--color-text) 45%, transparent);

  --nav-active-bg: var(--color-text);
  --nav-active-fg: var(--color-bg);

  --radius:    var(--radius-md);
  --radius-xl: var(--radius-lg);

  --shadow-xs: none;
  --shadow:    var(--shadow-md);

  --focus-ring: 0 0 0 2px var(--color-accent);
  --font-family: var(--font-body);

  /* ── Status-/Hinweisflächen (Chips, Badges, Warnungen) ────── */
  --tint-ok:            #e8f1e9;
  --tint-ok-border:     #b9d3bc;
  --tint-ok-text:       #2f5d34;
  --tint-info:          var(--color-neutral-200);
  --tint-info-border:   var(--color-neutral-400);
  --tint-info-text:     var(--color-neutral-800);
  --tint-warn:          var(--color-accent-100);
  --tint-warn-border:   var(--color-accent-400);
  --tint-warn-text:     var(--color-accent-800);
  --tint-danger:        var(--color-accent-200);
  --tint-danger-text:   var(--color-accent-800);
  --log-bg:             var(--color-neutral-900);
  --log-fg:             var(--color-neutral-200);
}

/* ── Basistypografie des Themes ─────────────────────────────── */
body {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

/* Fokus wie im Theme: 2px Akzent-Outline statt Browser-Standard */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }