/* KI²T Corporate-Design-Tokens — abgeleitet aus ki2t-logo.svg + Admin-Designsystem
   (Meteor-Token-Systematik). Web-Namespace --ki2t-*, unabhängig von Meteor-Interna.
   Quelle-Logo: Verlauf #1A2980→#0A1445, Akzent #7B9FE0, Weiß. */

:root {
  /* Marke */
  --ki2t-color-primary:      #1A2980; /* Logo-Verlauf Start (tiefes Blau) */
  --ki2t-color-primary-dark: #0A1445; /* Logo-Verlauf Ende (Nachtblau) */
  --ki2t-color-accent:       #7B9FE0; /* Logo-Pastellblau (K, T, Taglines) */
  --ki2t-color-accent-strong:#3B5BB5; /* dunklere Akzent-Variante für Text/Links auf Hell */

  /* Flächen & Text — Light (Default) */
  --ki2t-color-bg:         #ffffff;
  --ki2t-color-surface:    #f4f6fc; /* leichter Blaustich statt neutralem Grau */
  --ki2t-color-surface-2:  #e9eef8;
  --ki2t-color-border:     #d4dbf0;
  --ki2t-color-text:       #14183a; /* Nachtblau-Text statt Schwarz */
  --ki2t-color-text-muted: #565d80;

  /* Ampel — Betriebsklasse (AA-Kontrast als Badge geprüft) */
  --ki2t-ampel-gruen: #15803d; /* weiß-Text 4.9:1 */
  --ki2t-ampel-gelb:  #eab308; /* schwarz-Text ~10:1 */
  --ki2t-ampel-rot:   #dc2626; /* weiß-Text 4.5:1 */

  /* Typografie — Logo-Schriftlinie */
  --ki2t-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ki2t-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* Radius — Echo des Logo-rx (48/400 = 12 %) */
  --ki2t-radius:    12px;
  --ki2t-radius-sm: 8px;

  /* Spacing-Skala */
  --ki2t-space-1: 4px;
  --ki2t-space-2: 8px;
  --ki2t-space-3: 12px;
  --ki2t-space-4: 16px;
  --ki2t-space-5: 24px;
  --ki2t-space-6: 32px;

  /* Marken-Verlauf für Hero/Header */
  --ki2t-gradient-brand: linear-gradient(135deg, #1A2980 0%, #0A1445 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ki2t-color-bg:         #0A1445; /* Logo-Nachtblau als Grund */
    --ki2t-color-surface:    #131a3a;
    --ki2t-color-surface-2:  #1c2550;
    --ki2t-color-border:     #2b356b;
    --ki2t-color-text:       #eaeefb;
    --ki2t-color-text-muted: #9aa4cc;
    --ki2t-color-accent-strong: #9ab6ee;
  }
}

/* Viewer-Theme-Override (Data-Attribut gewinnt in beide Richtungen) */
:root[data-theme="light"] {
  --ki2t-color-bg: #ffffff; --ki2t-color-surface: #f4f6fc; --ki2t-color-surface-2: #e9eef8;
  --ki2t-color-border: #d4dbf0; --ki2t-color-text: #14183a; --ki2t-color-text-muted: #565d80;
  --ki2t-color-accent-strong: #3B5BB5;
}
:root[data-theme="dark"] {
  --ki2t-color-bg: #0A1445; --ki2t-color-surface: #131a3a; --ki2t-color-surface-2: #1c2550;
  --ki2t-color-border: #2b356b; --ki2t-color-text: #eaeefb; --ki2t-color-text-muted: #9aa4cc;
  --ki2t-color-accent-strong: #9ab6ee;
}

/* Ampel-Badge-Komponente (wird im Theme + Modul-Katalog genutzt) */
.ki2t-ampel {
  display: inline-block; padding: .15em .6em; border-radius: var(--ki2t-radius-sm);
  font: 600 .82em/1.4 var(--ki2t-font-sans); white-space: nowrap;
}
.ki2t-ampel--gruen { background: var(--ki2t-ampel-gruen); color: #fff; }
.ki2t-ampel--gelb  { background: var(--ki2t-ampel-gelb);  color: #14183a; }
.ki2t-ampel--rot   { background: var(--ki2t-ampel-rot);   color: #fff; }