/*
 * Trispel Reklamationstool — Farbsystem (Design Tokens)
 * Vollständige Dokumentation: docs/farbsystem.md
 * Komponenten referenzieren NUR semantische Tokens (--color-*), nie Ramp-Stufen direkt.
 */

:root {
  /* ---------- Ramps (50 = hell, 900 = dunkel) ---------- */

  /* Primär: Trispel-Rot (#E20613 = Markenwert von trispel.de) */
  --red-50: #fdf3f3;
  --red-100: #fbe2e3;
  --red-200: #f6c6c8;
  --red-300: #ef9a9e;
  --red-400: #e86a70;
  --red-500: #e20613;
  --red-600: #c10511;
  --red-700: #9e040e;
  --red-800: #7c030b;
  --red-900: #5a0208;

  /* Neutral (abgeleitet vom Trispel-Textgrau #575756) */
  --neutral-50: #f7f7f7;
  --neutral-100: #efefef;
  --neutral-200: #e2e2e1;
  --neutral-300: #c9c9c8;
  --neutral-400: #a5a5a4;
  --neutral-500: #7c7c7b;
  --neutral-600: #575756;
  --neutral-700: #3f3f3e;
  --neutral-800: #2a2a29;
  --neutral-900: #1a1a19;

  /* Erfolg (Grün) */
  --green-50: #f1f8f1;
  --green-100: #dfeedf;
  --green-200: #bfddc0;
  --green-300: #94c596;
  --green-400: #61a865;
  --green-500: #3c8c40;
  --green-600: #2e7d32;
  --green-700: #256428;
  --green-800: #1d4e20;
  --green-900: #153917;

  /* Warnung (Amber) */
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #f59e0b;
  --amber-500: #d97706;
  --amber-600: #b45309;
  --amber-700: #92400e;
  --amber-800: #78350f;
  --amber-900: #5c2a0d;

  /* Fehler (gedecktes Rot — bewusst vom Marken-Rot unterschieden) */
  --danger-50: #fcf1f1;
  --danger-100: #f8dede;
  --danger-200: #f0bcbc;
  --danger-300: #e39090;
  --danger-400: #d45e5e;
  --danger-500: #c62828;
  --danger-600: #a82222;
  --danger-700: #8a1c1c;
  --danger-800: #6d1616;
  --danger-900: #501010;

  /* Info (Blau) */
  --blue-50: #f0f6fc;
  --blue-100: #dbeaf8;
  --blue-200: #b5d4f0;
  --blue-300: #85b7e5;
  --blue-400: #5296d6;
  --blue-500: #2979c7;
  --blue-600: #1565c0;
  --blue-700: #1152a0;
  --blue-800: #0d4080;
  --blue-900: #0a2f5e;
}

/* ---------- Semantische Tokens: Light Mode (Default) ---------- */
:root {
  --color-primary: var(--red-500);
  --color-primary-hover: var(--red-600);
  --color-primary-contrast: #ffffff; /* Text auf Primär */

  --color-bg: var(--neutral-50);
  --color-surface: #ffffff;
  --color-surface-muted: var(--neutral-100);
  --color-header: var(--neutral-800); /* Sekundär: anthrazitfarbene Kopfleiste */
  --color-header-text: #ffffff;

  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-border: var(--neutral-200);

  --color-success: var(--green-600);
  --color-success-bg: var(--green-50);
  --color-success-text: var(--green-800);
  --color-warning: var(--amber-600);
  --color-warning-bg: var(--amber-50);
  --color-warning-text: var(--amber-800);
  --color-danger: var(--danger-600);
  --color-danger-bg: var(--danger-50);
  --color-danger-text: var(--danger-800);
  --color-info: var(--blue-600);
  --color-info-bg: var(--blue-50);
  --color-info-text: var(--blue-800);
}

/* ---------- Semantische Tokens: Dark Mode (eigene Belegung, nicht invertiert) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--red-400); /* hellere Stufe für Kontrast auf dunklen Flächen */
    --color-primary-hover: var(--red-300);
    --color-primary-contrast: var(--neutral-900);

    --color-bg: var(--neutral-900);
    --color-surface: var(--neutral-800);
    --color-surface-muted: var(--neutral-700);
    --color-header: #111110;
    --color-header-text: var(--neutral-100);

    --color-text: var(--neutral-50);
    --color-text-muted: var(--neutral-300);
    --color-border: var(--neutral-700);

    --color-success: var(--green-400);
    --color-success-bg: var(--green-900);
    --color-success-text: var(--green-200);
    --color-warning: var(--amber-400);
    --color-warning-bg: var(--amber-900);
    --color-warning-text: var(--amber-200);
    --color-danger: var(--danger-300); /* 400 verfehlt 4.5:1 auf Surface — als Fehlertext genutzt */
    --color-danger-bg: var(--danger-900);
    --color-danger-text: var(--danger-200);
    --color-info: var(--blue-400);
    --color-info-bg: var(--blue-900);
    --color-info-text: var(--blue-200);
  }
}

/* ---------- Mapping auf Pico.css ---------- */
:root {
  --pico-primary: var(--color-primary);
  --pico-primary-background: var(--color-primary);
  --pico-primary-border: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-hover-background: var(--color-primary-hover);
  --pico-primary-hover-border: var(--color-primary-hover);
  --pico-primary-inverse: var(--color-primary-contrast);
  --pico-primary-underline: var(--color-primary);
  --pico-primary-focus: color-mix(in srgb, var(--color-primary) 35%, transparent);
  --pico-background-color: var(--color-bg);
  --pico-card-background-color: var(--color-surface);
  --pico-card-sectioning-background-color: var(--color-surface-muted);
  --pico-color: var(--color-text);
  --pico-muted-color: var(--color-text-muted);
  --pico-muted-border-color: var(--color-border);
  --pico-border-color: var(--color-border);
}