/* ═══════════════════════════════════════════
   AGENT CORE — Design Tokens
   Importieren in app.css jeder App:
   @import '$lib/tokens.css';            (SvelteKit)
   @import '../../../ux_kit/tokens/tokens.css'; (relative)
   ═══════════════════════════════════════════ */

:root {
  /* ── Farb-Palette ── */

  /* Primär: Violett */
  --color-primary-50:  #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --color-primary-800: #5b21b6;
  --color-primary-900: #4c1d95;

  /* Neutral: Zinc (Dark-First) */
  --color-bg:          #09090b;   /* zinc-950 */
  --color-bg-elevated: #18181b;   /* zinc-900 */
  --color-bg-surface:  #27272a;   /* zinc-800 */
  --color-bg-muted:    #3f3f46;   /* zinc-700 */
  --color-border:      #27272a;   /* zinc-800 */
  --color-border-muted:#3f3f46;   /* zinc-700 */

  /* Text */
  --color-text:        #fafafa;   /* zinc-50 */
  --color-text-muted:  #a1a1aa;   /* zinc-400 */
  --color-text-subtle: #52525b;   /* zinc-600 */

  /* Semantic */
  --color-success:     #22c55e;   /* green-500 */
  --color-success-bg:  #052e16;
  --color-error:       #ef4444;   /* red-500 */
  --color-error-bg:    #450a0a;
  --color-warning:     #f59e0b;   /* amber-500 */
  --color-warning-bg:  #451a03;
  --color-info:        #3b82f6;   /* blue-500 */
  --color-info-bg:     #172554;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Typographie ── */
  --font-sans:  ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);  /* Federkurve */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index Skala ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Komponenten-spezifisch ── */
  --toast-bg:        var(--color-bg-elevated);
  --toast-border:    var(--color-border);
  --skeleton-base:   var(--color-bg-elevated);
  --skeleton-shine:  var(--color-bg-surface);
  --modal-backdrop:  rgb(0 0 0 / 0.7);
  --drawer-handle:   var(--color-bg-muted);
}

/* ── Light Mode Override (opt-in via data-theme="light") ── */
[data-theme="light"] {
  --color-bg:          #ffffff;
  --color-bg-elevated: #f4f4f5;
  --color-bg-surface:  #e4e4e7;
  --color-bg-muted:    #d4d4d8;
  --color-border:      #e4e4e7;
  --color-border-muted:#d4d4d8;
  --color-text:        #09090b;
  --color-text-muted:  #52525b;
  --color-text-subtle: #a1a1aa;
  --modal-backdrop:    rgb(0 0 0 / 0.4);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── High Contrast ── */
@media (prefers-contrast: more) {
  :root {
    --color-border:      #71717a;
    --color-text-muted:  #d4d4d8;
  }
}