/* KE Design System — Farben (1:1 aus tokens/theme.css des Repos).
   Rohpalette (Kupfer, Slate) + Semantics. Dark-first; Light remappt nur
   die Semantics via [data-theme="light"]. Farben NUR ueber var(--...). */
:root {
  /* Rohpalette: Kupfer (Demo-Default-Akzent, pro Projekt austauschbar) */
  --color-copper-50: oklch(0.97 0.024 50);
  --color-copper-100: oklch(0.93 0.055 50);
  --color-copper-200: oklch(0.86 0.103 48);
  --color-copper-300: oklch(0.78 0.144 45);
  --color-copper-400: oklch(0.71 0.176 41);
  --color-copper-500: oklch(0.66 0.204 38);
  --color-copper-600: oklch(0.60 0.213 36);
  --color-copper-700: oklch(0.55 0.198 34);
  --color-copper-800: oklch(0.48 0.170 32);
  --color-copper-900: oklch(0.40 0.140 30);
  --color-copper-950: oklch(0.28 0.100 28);

  /* Rohpalette: Slate (warm getoente Neutrale) */
  --color-slate-50: oklch(0.985 0.005 248);
  --color-slate-100: oklch(0.96 0.007 248);
  --color-slate-200: oklch(0.92 0.011 248);
  --color-slate-300: oklch(0.86 0.014 248);
  --color-slate-400: oklch(0.71 0.020 248);
  --color-slate-500: oklch(0.55 0.024 248);
  --color-slate-600: oklch(0.44 0.025 248);
  --color-slate-700: oklch(0.36 0.025 248);
  --color-slate-800: oklch(0.27 0.024 248);
  --color-slate-900: oklch(0.20 0.024 248);
  --color-slate-950: oklch(0.13 0.024 248);

  /* Semantics — Dark-first, 4-stufige Surface-Rampe, warmes Near-Black */
  --color-bg: #0a0a0b;
  --color-surface: #141415;
  --color-card: #1a1a1c;
  --color-elevated: #222225;
  --color-line: rgba(255, 255, 255, 0.07);
  --color-line-strong: rgba(255, 255, 255, 0.13);
  --color-fg: rgba(255, 255, 255, 0.92);
  --color-fg-2: rgba(255, 255, 255, 0.62);
  --color-fg-3: rgba(255, 255, 255, 0.40);

  --color-accent: var(--color-copper-400);
  --color-accent-strong: var(--color-copper-300);
  --color-accent-soft: oklch(0.71 0.176 41 / 0.14);
  --color-on-accent: #1c0f08;

  --color-ok: #4f9d69;
  --color-ok-bg: oklch(0.55 0.10 145 / 0.16);
  --color-warn: #c08a3e;
  --color-warn-bg: oklch(0.65 0.12 75 / 0.16);
  --color-err: #c25b52;
  --color-err-bg: oklch(0.55 0.14 25 / 0.16);
  --color-info: #5e8fd2;
  --color-info-bg: oklch(0.55 0.12 250 / 0.16);

  /* Charts — kategorial in FESTER Reihenfolge, nie zyklisch.
     Status-Farben nie als Serie. Sequenziell: Kupfer-Rampe.
     Divergierend: Teal <-> neutral <-> Kupfer. */
  --chart-1: #c8552a;
  --chart-2: #0f9d8c;
  --chart-3: #7c6ee8;
  --chart-4: #b58a1f;
  --chart-5: #c04f86;
  --chart-6: #4d7ed9;
}

[data-theme="light"] {
  --color-bg: var(--color-slate-50);
  --color-surface: #ffffff;
  --color-card: #ffffff;
  --color-elevated: var(--color-slate-100);
  --color-line: var(--color-slate-200);
  --color-line-strong: var(--color-slate-300);
  --color-fg: var(--color-slate-900);
  --color-fg-2: var(--color-slate-500);
  --color-fg-3: var(--color-slate-400);

  --color-accent: var(--color-copper-700);
  --color-accent-strong: var(--color-copper-800);
  --color-accent-soft: var(--color-copper-50);
  --color-on-accent: #ffffff;

  --color-ok: oklch(0.55 0.155 145);
  --color-ok-bg: oklch(0.94 0.040 145);
  --color-warn: oklch(0.65 0.155 75);
  --color-warn-bg: oklch(0.95 0.040 90);
  --color-err: oklch(0.55 0.180 25);
  --color-err-bg: oklch(0.94 0.040 25);
  --color-info: oklch(0.55 0.155 250);
  --color-info-bg: oklch(0.94 0.040 250);

  --shadow-overlay: 0 12px 32px -8px rgb(0 0 0 / 0.10), 0 4px 12px -4px rgb(0 0 0 / 0.06);
  --shadow-modal: 0 24px 60px -12px rgb(0 0 0 / 0.18), 0 8px 24px -8px rgb(0 0 0 / 0.10);
}