/* IIINITY-Designvorlage v1.0.1 (2026-09-23) · Tokens
   Werte und Namen aus IIINITY-2.0/modules/10-canvas-ui/src/styles/tokens.css (hell und dunkel,
   dort gemessen), ergänzt um die Tokens der Vorlage. EINZIGE Datei mit festen Farbwerten.
   Aufbau: (1) Tokens, die nie kippen · (2) helle Werte der kippenden Tokens · (3) dunkle Werte,
   zweimal gleich, beide nur @media screen, damit der Druck immer hell ist. Geprüft von pruefe.mjs. */

/* (1) Tokens, die nie kippen */
:root {
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Marke. Gold ist der einzige Akzent. Schrift auf Gold ist immer dunkel (6,28:1). */
  --color-primary: #c5a572;
  --color-primary-hover: #b8975f;
  --color-auf-gold: #1a2a38;
  --color-auf-marine: #ffffff;
  --color-secondary: #2c3e50;
  --color-secondary-deep: #1a2a38;
  --color-secondary-light: #34495e;
  --color-green: #309e3a;
  --color-red: #e53e3e;
  --color-blue: #3182ce;
  --color-amber-on-dark: #d97706;

  /* Bühne: in BEIDEN Themen dunkel (Ergebnis-Banner, Tooltip, Titelflächen) */
  --buehne-flaeche: #152230;
  --buehne-karte: #22344a;
  --buehne-rand: #34495e;
  --buehne-text-stark: #e2e8f0;
  --buehne-text: #cbd5e0;
  --buehne-text-leise: #a0aec0;
  --buehne-linie: rgb(255 255 255 / 10%);
  --buehne-gruen: #36b141;

  /* Form */
  --radius: 10px;
  --radius-klein: 4px;
  --radius-rund: 999px;
  --container: 960px;
  --container-breit: 1200px;

  /* Abstände (benennen eine Entfernung, kein Bauteil) */
  --abstand-fuge: 2px;
  --abstand-eng: 4px;
  --abstand-zeile: 8px;
  --abstand-gruppe: 12px;
  --abstand-polster: 16px;
  --abstand-weit: 20px;
  --abstand-block: 24px;
  --abstand-abschnitt: 32px;
  --abstand-rand: 48px;

  /* Fokusring: zweifarbig, auf jeder Fläche derselbe Wert */
  --ring-innen: #1a2a38;
  --ring-aussen: #ffffff;
  --ring-staerke: 2px;
  --ring-abstand: 2px;

  /* Zustände (zeigen auf kippende Tokens, kippen dadurch mit) */
  --zustand-hover: var(--color-surface-alt);
  --zustand-aktiv: var(--color-border);
  --zustand-aus: 0.45;

  /* Bewegung */
  --zeit-schnell: 150ms;
  --zeit-ruhig: 220ms;
  --kurve-zustand: ease;

  /* Schriftskala (Rechner) */
  --t-hinweis: 11px;
  --t-klein: 12px;
  --t-label: 13px;
  --t-text: 14px;
  --t-lead: 16px;
  --t-kartentitel: 20px;
  --t-abschnitt: 22px;
  --t-kennzahl: 28px;
  --t-seite: 32px;
  --t-betrag: 48px;

  /* Getönte Flächen: 12 % Statusfarbe über dem Tint-Grund (hell Weiß, dunkel Bühne) */
  --tint-anteil: 12%;
  --tint-info: color-mix(in srgb, var(--color-blue) var(--tint-anteil), var(--color-chip-grund));
  --tint-warnung: color-mix(in srgb, var(--color-red) var(--tint-anteil), var(--color-chip-grund));
  --tint-erfolg: color-mix(in srgb, var(--color-green) var(--tint-anteil), var(--color-chip-grund));
  --tint-gold: color-mix(in srgb, var(--color-primary) var(--tint-anteil), var(--color-chip-grund));
}

/* (2) helle Werte der kippenden Tokens */
:root {
  color-scheme: light;
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-alt: #e2ebf4;
  --color-headings: #2d3748;
  --color-text: #4a5568;
  --color-text-stark: #2d3748;
  --color-border: #e2ebf4;
  --color-feldrand: #8c9197;
  --color-grafik-neutral: #5b6b80;
  --color-amber: #b45309;
  --color-chip-grund: #ffffff;
  --color-red-text: #b03030;
  --color-amber-text: #994608;
  --color-green-text: #227029;
  --color-blue-text: #296cab;
  --color-eingabe-rand: #2c3e50;
  --color-einheit-text: #ffffff;
  --color-tabellenkopf: #2c3e50;
  --color-marine-flaeche: #2c3e50;
  --color-kennzahl-flaeche: var(--color-surface-alt);
  --serie-kunde: #5b6b80;
  --serie-ki-depot: #3182ce;
  --serie-ki-nettopolice: #16a34a;
  --serie-bruttopolice: #dc2626;
  --serie-nettopolice: #0d8b3d;
  --logo-flaeche: transparent;
  --logo-polster: 0;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 12px 40px rgba(26, 42, 56, 0.18);
}

/* (3) dunkle Werte: Systemeinstellung, solange keine feste Wahl »hell« besteht */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #1a2a38;
    --color-surface: #22344a;
    --color-surface-alt: #2c3e50;
    --color-headings: #e2e8f0;
    --color-text: #cbd5e0;
    --color-text-stark: #e2e8f0;
    --color-border: #34495e;
    --color-feldrand: #5a7fa3;
    --color-grafik-neutral: #8594a8;
    --color-amber: var(--color-amber-on-dark);
    --color-chip-grund: var(--buehne-flaeche);
    --color-red-text: #e67b7b;
    --color-amber-text: #d98b30;
    --color-green-text: #36b141;
    --color-blue-text: #83aace;
    --color-eingabe-rand: #7d9dc0;
    --color-einheit-text: var(--buehne-flaeche);
    --color-tabellenkopf: var(--buehne-flaeche);
    --color-marine-flaeche: #34495e;
    --color-kennzahl-flaeche: var(--color-bg);
    --serie-kunde: #8594a8;
    --serie-ki-depot: #63a4e6;
    --serie-ki-nettopolice: #4ade80;
    --serie-bruttopolice: #f87171;
    --serie-nettopolice: #38a169;
    --logo-flaeche: var(--color-auf-marine);
    --logo-polster: 6px 10px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

/* (3) dunkle Werte: feste Wahl »dunkel«. MUSS dieselben Werte tragen wie der Block darüber. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #1a2a38;
    --color-surface: #22344a;
    --color-surface-alt: #2c3e50;
    --color-headings: #e2e8f0;
    --color-text: #cbd5e0;
    --color-text-stark: #e2e8f0;
    --color-border: #34495e;
    --color-feldrand: #5a7fa3;
    --color-grafik-neutral: #8594a8;
    --color-amber: var(--color-amber-on-dark);
    --color-chip-grund: var(--buehne-flaeche);
    --color-red-text: #e67b7b;
    --color-amber-text: #d98b30;
    --color-green-text: #36b141;
    --color-blue-text: #83aace;
    --color-eingabe-rand: #7d9dc0;
    --color-einheit-text: var(--buehne-flaeche);
    --color-tabellenkopf: var(--buehne-flaeche);
    --color-marine-flaeche: #34495e;
    --color-kennzahl-flaeche: var(--color-bg);
    --serie-kunde: #8594a8;
    --serie-ki-depot: #63a4e6;
    --serie-ki-nettopolice: #4ade80;
    --serie-bruttopolice: #f87171;
    --serie-nettopolice: #38a169;
    --logo-flaeche: var(--color-auf-marine);
    --logo-polster: 6px 10px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}