/* Design-Tokens: Farbpalette (Tailwind-Werte) und semantische Rollen für hell/dunkel.
   Komponenten in components.css verwenden nur die semantischen Tokens (--ep-*). */
:root {
  --slate-50: oklch(98.4% 0.003 247.858);
  --slate-100: oklch(96.8% 0.007 247.896);
  --slate-200: oklch(92.9% 0.013 255.508);
  --slate-300: oklch(86.9% 0.022 252.894);
  --slate-400: oklch(70.4% 0.04 256.788);
  --slate-500: oklch(55.4% 0.046 257.417);
  --slate-600: oklch(44.6% 0.043 257.281);
  --slate-700: oklch(37.2% 0.044 257.287);
  --slate-900: oklch(20.8% 0.042 265.755);
  --cyan-300: oklch(86.5% 0.127 207.078);
  --cyan-400: oklch(78.9% 0.154 211.53);
  --cyan-500: oklch(71.5% 0.143 215.221);
  --rose-400: oklch(71.2% 0.194 13.428);
  --rose-500: oklch(64.5% 0.246 16.439);
  --white: #fff;

  --ep-radius: 0.75rem;
  --ep-radius-lg: 1rem;
  --ep-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --ep-surface: var(--white);
  --ep-border: color-mix(in oklab, var(--slate-200) 70%, transparent);
  --ep-shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
  --ep-text-muted: var(--slate-500);
  --ep-placeholder: var(--slate-400);

  --ep-accent: var(--cyan-500);
  --ep-accent-hover: var(--cyan-400);
  --ep-on-accent: var(--white);
  --ep-accent-shadow: color-mix(in oklab, var(--cyan-500) 25%, transparent);
  --ep-focus: var(--cyan-400);

  --ep-soft-bg: var(--slate-100);
  --ep-soft-bg-hover: color-mix(in oklab, var(--slate-200) 80%, transparent);
  --ep-soft-text: var(--slate-700);
  --ep-icon: var(--slate-500);
  --ep-icon-hover-bg: var(--slate-100);

  --ep-input-bg: var(--white);
  --ep-input-border: color-mix(in oklab, var(--slate-200) 70%, transparent);
}

.dark {
  --ep-surface: color-mix(in oklab, var(--slate-700) 80%, transparent);
  --ep-border: color-mix(in oklab, var(--slate-600) 40%, transparent);
  --ep-shadow-card: none;
  --ep-text-muted: var(--slate-400);
  --ep-placeholder: var(--slate-500);

  --ep-accent: var(--cyan-400);
  --ep-accent-hover: var(--cyan-300);
  --ep-on-accent: var(--slate-900);
  --ep-accent-shadow: color-mix(in oklab, var(--cyan-400) 10%, transparent);

  --ep-soft-bg: color-mix(in oklab, var(--slate-600) 70%, transparent);
  --ep-soft-bg-hover: color-mix(in oklab, var(--slate-600) 70%, transparent);
  --ep-soft-text: var(--slate-100);
  --ep-icon: var(--slate-300);
  --ep-icon-hover-bg: color-mix(in oklab, var(--slate-600) 60%, transparent);

  --ep-input-bg: color-mix(in oklab, var(--slate-600) 50%, transparent);
  --ep-input-border: color-mix(in oklab, var(--slate-600) 70%, transparent);
}