// J3 UI-Redesign — Abstracts: Build-Zeit-Primitive (Paletten, Skalen, Mixins)
// Autor: Jarvis-3 (J3) · 2026-09-05 · v0.1.0

@use 'sass:map';

// ── Basis-Palette (Marke) ─────────────────────────────────────────────
$lime:        #8fd600;
$lime-dim:    #5a9e00;
$orange:      #ff6200;
$ok:          #16a34a;
$warn:        #d97706;
$error:       #e5484d;
$info:        #4c7dff;
$offline:     #8b9089;

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

// ── Skalen ────────────────────────────────────────────────────────────
$spacing: (0 1 2 3 4 5 6 8 10 12 16 24);      // ×4 px
$breakpoints: (xs: 480, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536);
$radius: (sm: 6px, md: 10px, lg: 14px, xl: 20px, full: 9999px);

$dur-fast: 120ms;
$dur: 200ms;
$dur-slow: 320ms;
$ease: cubic-bezier(.2, .6, .2, 1);

// ── Funktionen ────────────────────────────────────────────────────────
@function sp($step) {
  @return $step * 4px;
}

// ── Mixins ────────────────────────────────────────────────────────────
@mixin bp-up($name) {
  @media (min-width: map.get($breakpoints, $name)) { @content; }
}
@mixin bp-down($name) {
  @media (max-width: map.get($breakpoints, $name) - 1) { @content; }
}

@mixin card($pad: sp(5), $rad: map.get($radius, lg)) {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: $rad;
  padding: $pad;
}

@mixin truncate($lines: 1) {
  @if $lines == 1 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  } @else {
    display: -webkit-box; -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical; overflow: hidden;
  }
}

@mixin focus-ring {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@mixin reduced-motion {
  @media (prefers-reduced-motion: reduce) { @content; }
}