// J3 UI-Redesign — Base: Tokens (CSS-Custom-Properties), Reset, Typografie, Utilities
// Autor: Jarvis-3 (J3) · 2026-09-05 · v0.1.0
@use 'abstracts' as *;

// ── Design-Tokens ─────────────────────────────────────────────────────
:root {
  // Schriften (Rollen, nicht Abhängigkeiten)
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", monospace;
  --font-brand: "Syne", "Inter", system-ui, sans-serif;   // nur Wortmarke

  // Typo-Skala (kompakt — Kontrollraum-Dichte)
  --fs-xs:   10px;
  --fs-sm:   11.5px;
  --fs-base: 12.5px;
  --fs-lg:   14px;
  --fs-xl:   16.5px;
  --fs-2xl:  20px;
  --fs-3xl:  26px;
  --fs-hero: clamp(2.2rem, 5vw, 4rem);

  // Spacing (4-px-System, verdichtet)
  --s-0: 0;   --s-1: 3px;  --s-2: 6px;   --s-3: 9px;
  --s-4: 12px; --s-5: 15px; --s-6: 18px;  --s-8: 24px;
  --s-10: 30px; --s-12: 36px; --s-16: 48px; --s-24: 72px;

  // Radius / Motion / Z (härtere Ecken = technischer)
  --r-sm: 4px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-full: 9999px;
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --z-rail: 40; --z-topbar: 50; --z-scrim: 90; --z-slideover: 100;
  --z-modal: 110; --z-toast: 120;

  // Shell-Maße (kompakt)
  --topbar-h: 42px;
  --rail-w: 196px;
  --rail-w-collapsed: 52px;
  --statusbar-h: 26px;
  --stream-w: 292px;

  // Markenfarben (theme-unabhängig)
  --primary: #8fd600;
  --primary-dim: #5a9e00;
  --accent: #ff6200;
  --ok: #16a34a;
  --warn: #d97706;
  --error: #e5484d;
  --info: #4c7dff;
  --offline: #8b9089;

  // Event-Palette
  --event-register: #4c7dff; --event-heartbeat: #16a34a; --event-run: #7c3aed;
  --event-iteration: #8fd600; --event-tool: #d97706; --event-error: #e5484d;
  --event-chat: #0891b2; --event-model: #db2777; --event-usage: #65a30d;
  --event-data: #6366f1; --event-thinking: #8b5cf6;
}

// ── Dark (Default) ────────────────────────────────────────────────────
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg:    #0a0c0b;
  --bg-1:  #111412;
  --bg-2:  #171b18;
  --bg-3:  #1e231f;
  --bg-inset: #070908;
  --line:   rgba(233, 236, 233, .075);
  --line-2: rgba(233, 236, 233, .14);
  --text:   #e9ece9;
  --text-2: rgba(233, 236, 233, .62);
  --text-3: rgba(233, 236, 233, .38);
  --primary-ink: #0a0c0b;          // Text auf Lime-Fläche
  --primary-text: #9ee600;         // Lime als Text auf dunklem Grund
  --accent-text: #ff7a26;
  --focus: rgba(143, 214, 0, .55);
  --glow: rgba(143, 214, 0, .13);
  --scrim: rgba(4, 6, 5, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .55);
}

// ── Light (vollwertig) ────────────────────────────────────────────────
[data-theme="light"] {
  color-scheme: light;
  --bg:    #f2f3f1;
  --bg-1:  #ffffff;
  --bg-2:  #ffffff;
  --bg-3:  #eef0ed;
  --bg-inset: #e8eae7;
  --line:   rgba(18, 22, 19, .09);
  --line-2: rgba(18, 22, 19, .16);
  --text:   #141714;
  --text-2: rgba(20, 23, 20, .64);
  --text-3: rgba(20, 23, 20, .42);
  --primary-ink: #ffffff;
  --primary-text: #4f8200;         // Lime als Text auf hellem Grund (gedimmt)
  --accent-text: #c24a00;
  --focus: rgba(111, 170, 0, .5);
  --glow: rgba(143, 214, 0, .18);
  --scrim: rgba(20, 24, 20, .35);
  --shadow-1: 0 1px 2px rgba(20, 24, 20, .07);
  --shadow-2: 0 4px 16px rgba(20, 24, 20, .09);
  --shadow-3: 0 12px 40px rgba(20, 24, 20, .16);
  // Marken-Aktionen bleiben Lime, Texte darauf dunkel-lesbar:
  --primary-ink: #141714;
}

// ── Reset ─────────────────────────────────────────────────────────────
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05", "ss01";   // Inter: ruhigere Formen
}
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
::selection { background: var(--glow); }

// Scrollbars: schmal, ruhig
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible { @include focus-ring; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

// ── Typografie ────────────────────────────────────────────────────────
h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
.mono { font-family: var(--font-mono); }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-lg { font-size: var(--fs-lg); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-primary { color: var(--primary-text); }
.t-accent { color: var(--accent-text); }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); }
.t-error { color: var(--error); } .t-info { color: var(--info); }
.t-center { text-align: center; }
.t-upper { text-transform: uppercase; letter-spacing: .09em; }
.t-nowrap { white-space: nowrap; }
.eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-3); font-weight: 500;
}
.inline-code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px;
}

// ── Utilities (klein gehalten, Komposition in Komponenten) ───────────
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.flex-1 { flex: 1; } .min-w-0 { min-width: 0; } .wrap { flex-wrap: wrap; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.ml-auto { margin-left: auto; }
.t-right { text-align: right; }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.truncate { @include truncate; }
.clamp-2 { @include truncate(2); }
.hidden { display: none !important; }
.rel { position: relative; }
.w-full { width: 100%; }
.fade-in { animation: fade-in var(--dur) var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }