/* ============================================================
 * ERZEUGT — nicht von Hand editieren.
 *
 * Quelle:  tokens/tokens.json  in @viere/ui
 * Neu bauen:  npm run tokens          (im Paket)
 * Drift prüfen:  npm run tokens:check
 *
 * Viere Farbsystem „Tinte" — VIERE-DESIGN-001
 * Kühl trägt Marke, Aktivität und Zuwachs; warm trägt Aufmerksamkeit, Verlust und Gefahr.
 * Stufe 1 — Farbe trägt Identität, primäre Aktion und „läuft"; Navigation und Auswahl tragen Gewicht.
 *
 * Ziel: statisches CSS
 * ============================================================ */

:root {
  --background: #f8f5ee;
  --foreground: #1c1813;
  --card: #fffdf9;
  --card-foreground: #1c1813;
  --muted: #efe9dd;
  --muted-foreground: #6e6558;
  --border: #e6dfd2;
  --input: #a08b6b;
  --selection: rgba(0,0,0,.045);
  --primary: #305d98;
  --primary-hover: #2a5288;
  --primary-foreground: #ffffff;
  --ring: #305d98;
  --warning: #93682f;
  --warning-surface: rgba(147,104,47,.11);
  --destructive: #b05645;
  --destructive-surface: rgba(176,86,69,.10);
  --positive: #266d61;
  --positive-surface: rgba(38,109,97,.11);
  --severity-high: #9c613a;
  --diff-added: #266d61;
  --diff-added-surface: rgba(38,109,97,.10);
  --diff-removed: #8c5239;
  --diff-removed-surface: rgba(140,82,57,.10);
  --category-1: #266d61;
  --category-2: #6054af;
  --category-3: #804c9a;

  /* Alt-Namen der Website — zeigen auf die kanonischen Token. */
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-dark: var(--primary-hover);
  --bg: var(--background);
  --bg-alt: var(--muted);
  --surface: var(--card);
  --text: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-heading: var(--foreground);

  /* Platforms Skala (VIERE-DESIGN-002 C). AIR hatte keine eigene und fiel auf Tailwind-Defaults zurueck. */
  --radius-xs: 0.2rem;
  --radius-sm: 0.3rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.55rem;
  --radius-xl: 0.65rem;
  --radius-2xl: 0.75rem;

  /* Diese Namen benutzen, nicht die Skala direkt — sonst driftet es wieder. */
  --shell-radius: 0;
  --card-radius: 0.65rem;
  --control-radius: 0.45rem;
  --badge-radius: 9999px;

  /* VIERE-DESIGN-002 D: Arbeitsflaechen dicht, Uebersichten luftig. Bewusst gewaehlt statt zufaellig. */
  --row-pad-dense: 0.25rem 0.5rem;
  --row-pad-airy: 0.5rem 0.75rem;
  --stack-gap-dense: 0.5rem;
  --stack-gap-airy: 0.75rem;
  --section-gap-dense: 1rem;
  --section-gap-airy: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-color-scheme="light"]) {
    --background: #191410;
    --foreground: #f4ede0;
    --card: #241d16;
    --card-foreground: #f4ede0;
    --muted: #2a2219;
    --muted-foreground: #b3a58f;
    --border: #342c20;
    --input: #706048;
    --selection: rgba(255,255,255,.06);
    --primary: #7da3d6;
    --primary-hover: #93b4e0;
    --primary-foreground: #191410;
    --ring: #7da3d6;
    --warning: #c38a40;
    --warning-surface: rgba(195,138,64,.13);
    --destructive: #c98375;
    --destructive-surface: rgba(201,131,117,.13);
    --positive: #3dae9b;
    --positive-surface: rgba(61,174,155,.13);
    --severity-high: #c18258;
    --diff-added: #3dae9b;
    --diff-added-surface: rgba(61,174,155,.12);
    --diff-removed: #c78f77;
    --diff-removed-surface: rgba(199,143,119,.12);
    --category-1: #3dae9b;
    --category-2: #9d96cd;
    --category-3: #b48ec7;
  
    /* Alt-Namen der Website — zeigen auf die kanonischen Token. */
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-dark: var(--primary-hover);
    --bg: var(--background);
    --bg-alt: var(--muted);
    --surface: var(--card);
    --text: var(--foreground);
    --text-muted: var(--muted-foreground);
    --text-heading: var(--foreground);
  }
}

:root[data-theme="dark"], :root[data-color-scheme="dark"] {
  --background: #191410;
  --foreground: #f4ede0;
  --card: #241d16;
  --card-foreground: #f4ede0;
  --muted: #2a2219;
  --muted-foreground: #b3a58f;
  --border: #342c20;
  --input: #706048;
  --selection: rgba(255,255,255,.06);
  --primary: #7da3d6;
  --primary-hover: #93b4e0;
  --primary-foreground: #191410;
  --ring: #7da3d6;
  --warning: #c38a40;
  --warning-surface: rgba(195,138,64,.13);
  --destructive: #c98375;
  --destructive-surface: rgba(201,131,117,.13);
  --positive: #3dae9b;
  --positive-surface: rgba(61,174,155,.13);
  --severity-high: #c18258;
  --diff-added: #3dae9b;
  --diff-added-surface: rgba(61,174,155,.12);
  --diff-removed: #c78f77;
  --diff-removed-surface: rgba(199,143,119,.12);
  --category-1: #3dae9b;
  --category-2: #9d96cd;
  --category-3: #b48ec7;

  /* Alt-Namen der Website — zeigen auf die kanonischen Token. */
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-dark: var(--primary-hover);
  --bg: var(--background);
  --bg-alt: var(--muted);
  --surface: var(--card);
  --text: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-heading: var(--foreground);
}