/* ============================================================
   KIK-S Designsystem — Design Tokens
   Kommunale IT Kooperation Stadtwerke
   ------------------------------------------------------------
   Single Source of Truth fuer den Website-Neubau (kik-s.info).
   Statische Architektur (HTML/JS, Cloudflare Pages).

   Markenfarben aus dem Entwurf (webneu.kik-s.info) uebernommen:
     Primaer  #1f5aaa  (Kommunalblau, Vertrauen)
     Akzent   #f36f25  (Energie-Orange, sparsam: CTAs / Aktiv-Marker)

   Schriften (Open Source, selbst hosten -> DSGVO):
     Headlines: Public Sans
     Body:      Inter
   ============================================================ */

:root {
  /* ---------- Farbtonleitern (Primitive) ---------- */

  /* Blau — Primaer */
  --blue-50:  #eef4fb;
  --blue-100: #d4e2f3;
  --blue-200: #a9c4e6;
  --blue-300: #82aadb;
  --blue-400: #5d8fce;
  --blue-500: #3b74bb;
  --blue-600: #1f5aaa;   /* Markenfarbe */
  --blue-700: #184584;
  --blue-800: #15324f;   /* "Dunkel": Headlines, Footer */
  --blue-900: #0f2438;

  /* Orange — Akzent */
  --orange-50:  #fef1e9;
  --orange-100: #fcd9c4;
  --orange-200: #f9b78e;
  --orange-300: #f7a06b;
  --orange-400: #f68d4f;
  --orange-500: #f47d39;
  --orange-600: #f36f25;  /* Markenfarbe */
  --orange-700: #c95817;
  --orange-800: #8a3e12;
  --orange-900: #5e2a0c;

  /* Neutral — leicht blaustichig, passt zum Kommunalblau */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f9fb;
  --neutral-100: #eef1f5;
  --neutral-200: #dfe3e8;
  --neutral-300: #c6cdd6;
  --neutral-400: #a7b2bd;
  --neutral-500: #7c8a98;
  --neutral-600: #5a6b7a;
  --neutral-700: #3a4a59;
  --neutral-800: #28323d;
  --neutral-900: #1c2630;

  /* Semantisch (Status) — abgeleitet, nicht aus Marke */
  --green-50:  #e9f5ec;
  --green-600: #2e7d46;
  --red-50:    #fcecec;
  --red-600:   #c43d3d;
  --amber-50:  #fdf3e0;
  --amber-600: #c8870f;

  /* ---------- Rollen (Purpose-Layer — hier baut man Seiten drauf) ---------- */

  /* Marke */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active:  var(--blue-800);
  --color-accent:         var(--orange-600);
  --color-accent-hover:   var(--orange-700);

  /* Flaechen */
  --surface-page:    var(--neutral-50);   /* Seitenhintergrund */
  --surface-card:    var(--neutral-0);    /* Cards, Panels */
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-100);  /* abgesetzte Bereiche */
  --surface-inverse: var(--blue-800);     /* Footer, dunkle Sektionen */

  /* Text */
  --text-heading:    var(--blue-800);     /* Ueberschriften */
  --text-body:       var(--neutral-700);  /* Fliesstext */
  --text-secondary:  var(--neutral-600);  /* Sekundaertext */
  --text-muted:      var(--neutral-500);  /* Hinweise, Captions */
  --text-on-primary: var(--neutral-0);    /* Text auf Blau */
  --text-on-accent:  var(--neutral-0);    /* Text auf Orange */
  --text-on-inverse: var(--neutral-0);    /* Text auf dunkler Flaeche */
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Borders */
  --border:        var(--neutral-200);    /* Standard-Hairline */
  --border-strong: var(--neutral-300);    /* Hover, Betonung */
  --border-focus:  var(--blue-600);       /* Fokusring */

  /* Status (Hintergrund-Tint + Text) */
  --bg-success:   var(--green-50);   --text-success: var(--green-600);
  --bg-danger:    var(--red-50);     --text-danger:  var(--red-600);
  --bg-warning:   var(--amber-50);   --text-warning: var(--amber-600);
  --bg-info:      var(--blue-50);    --text-info:    var(--blue-700);

  /* ---------- Typografie ---------- */
  --font-heading: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Schriftgroessen (modulare Skala ~1.25) */
  --fs-xs:   0.75rem;   /* 12px — Pills, Captions */
  --fs-sm:   0.875rem;  /* 14px — Labels, kleine UI */
  --fs-base: 1.0625rem; /* 17px — Fliesstext (barrierearm) */
  --fs-md:   1.25rem;   /* 20px — Lead, H3 */
  --fs-lg:   1.75rem;   /* 28px — H2 */
  --fs-xl:   2.5rem;    /* 40px — H1 */
  --fs-2xl:  3.25rem;   /* 52px — Hero */

  /* Schriftstaerken */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Zeilenhoehen */
  --lh-tight:   1.2;   /* Headlines */
  --lh-snug:    1.4;
  --lh-normal:  1.6;   /* Fliesstext */
  --lh-relaxed: 1.7;

  /* Max. Lesebreite */
  --measure: 70ch;

  /* ---------- Spacing — 8px-Raster ---------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 7.5rem;   /* 120px — Section-Abstand */

  /* Section-Vertikalabstand (der Haupthebel fuer "modern") */
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* ---------- Border-Radius ---------- */
  --radius-sm:   4px;
  --radius:      6px;    /* Controls, Buttons, Inputs */
  --radius-card: 12px;   /* Cards */
  --radius-pill: 999px;  /* Status-Pills */

  /* ---------- Schatten (dezent, kommunal-gesetzt) ---------- */
  --shadow-sm:  0 1px 2px rgba(21, 50, 79, 0.06);
  --shadow:     0 4px 12px rgba(21, 50, 79, 0.08);
  --shadow-lg:  0 12px 32px rgba(21, 50, 79, 0.12);

  /* ---------- Layout ---------- */
  --container:      1200px;  /* Inhaltsbreite */
  --container-text: 760px;   /* Reine Textseiten */

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* ============================================================
   Dark Mode — vorbereitet, ueberschreibt nur Rollen-Tokens.
   Aktivierung: <html data-theme="dark"> oder Media-Query.
   Primitive (Tonleitern) bleiben unveraendert.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:    var(--blue-900);
  --surface-card:    var(--neutral-800);
  --surface-raised:  var(--neutral-700);
  --surface-sunken:  #16202b;
  --surface-inverse: #0a1722;

  --text-heading:    var(--neutral-0);
  --text-body:       var(--neutral-200);
  --text-secondary:  var(--neutral-300);
  --text-muted:      var(--neutral-400);
  --text-link:       var(--blue-300);
  --text-link-hover: var(--blue-200);

  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-400);

  --border:        #34414e;
  --border-strong: #45525f;

  --bg-info:    rgba(31, 90, 170, 0.18);  --text-info:    var(--blue-200);
  --bg-success: rgba(46, 125, 70, 0.18);  --text-success: #7fcf97;
  --bg-danger:  rgba(196, 61, 61, 0.18);  --text-danger:  #ec9090;
  --bg-warning: rgba(200, 135, 15, 0.18); --text-warning: #e3b65e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Optional: automatisch nach Systemeinstellung, wenn kein data-theme gesetzt.
   Vorerst auskommentiert — Light bleibt Default (kommunale Zielgruppe).
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { ... gleiche Overrides wie oben ... }
}
*/

/* ============================================================
   Basis-Anwendung der Tokens (optional — Startpunkt fuer Seiten)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 0.625rem 1.25rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary { background: var(--color-primary); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); text-decoration: none; }
.btn-accent { background: var(--color-accent); color: var(--text-on-accent); }
.btn-accent:hover { background: var(--color-accent-hover); text-decoration: none; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--blue-50); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--color-primary); padding-left: var(--space-1); padding-right: var(--space-1); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Card */
.card {
  background: var(--surface-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* Status-Pill */
.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 0.1875rem 0.625rem; border-radius: var(--radius-pill);
}
.pill-info    { background: var(--bg-info);    color: var(--text-info); }
.pill-neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.pill-accent  { background: var(--orange-100); color: var(--orange-800); }

/* Container */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section  { padding-block: var(--section-y); }