/* =============================================================
   ReloCrate — Design Tokens (v2 · minimal / reduced)
   -------------------------------------------------------------
   Neutrale Basis + genau EIN Primary- und EIN Secondary-Akzent.
   Rebranding über --accent / --accent-2. Sonst nichts Buntes.
   ============================================================= */

:root {
  /* ---- Neutrale (kühles Zinc) ---------------------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F7F7F9;
  --n-75:  #F2F2F4;
  --n-100: #ECECEF;
  --n-150: #E4E4E8;
  --n-200: #DADADF;
  --n-300: #C3C3CB;
  --n-400: #9B9BA5;
  --n-500: #74747E;
  --n-600: #56565E;
  --n-700: #3E3E45;
  --n-800: #27272C;
  --n-900: #18181B;
  --n-950: #0D0D0F;

  /* ---- Akzente (nur zwei!) ------------------------------- */
  /* Primary: technisches Periwinkle-Indigo */
  --accent:        #5E63D6;
  --accent-hover:  #4F54C9;
  --accent-press:  #4448B8;
  --accent-soft:   rgba(94, 99, 214, 0.10);
  --accent-line:   rgba(94, 99, 214, 0.22);
  --accent-glow:   rgba(94, 99, 214, 0.35);

  /* Secondary: ruhiges Teal (positiv / erledigt) */
  --accent-2:      #1FA890;
  --accent-2-soft: rgba(31, 168, 144, 0.12);

  /* Support-Töne (sparsam): Amber (Zwischenschritt), Danger (Löschen/Fehler) */
  --amber:      #E0A23C;
  --amber-soft: rgba(224, 162, 60, 0.14);
  --danger:      #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.12);

  /* ---- Semantische Oberflächen (Light) ------------------- */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-hover: var(--n-50);
  --hairline:      var(--n-100);
  --hairline-strong: var(--n-200);

  --text-strong: var(--n-900);
  --text:        var(--n-700);
  --text-muted:  var(--n-500);
  --text-faint:  var(--n-400);
  --text-on-accent: #FFFFFF;

  /* Pack-Status — bewusst zurückgenommen, aus dem 2-Akzent-System.
     Nur „in Arbeit" (primary) und „gepackt/erledigt" (secondary)
     tragen Farbe; der Rest bleibt neutral. */
  --st-planned: var(--n-300);   /* geplant   – hohl/neutral */
  --st-progress: var(--accent); /* in Arbeit – primary       */
  --st-packed:  var(--accent-2);/* gepackt   – secondary     */
  --st-transit: var(--n-500);   /* im Transit– neutral dunkel*/
  --st-done:    var(--n-800);   /* ausgepackt– neutral solid */

  /* ---- Typografie ---------------------------------------- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Roboto Condensed", var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* ---- Radien (reduziert) -------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- Schatten (sehr dezent) ---------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 13, 15, 0.04);
  --shadow-sm: 0 1px 3px rgba(13, 13, 15, 0.05);
  --shadow-md: 0 8px 24px rgba(13, 13, 15, 0.06);
  --shadow-lg: 0 20px 48px rgba(13, 13, 15, 0.10);
  --ring:      0 0 0 3.5px var(--accent-soft);

  /* ---- Abstände (grosszügig) ----------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Layout -------------------------------------------- */
  --sidebar-w: 308px;
  --sidebar-w-collapsed: 84px;
  --sidebar-gap: 16px;
  --pad-x: clamp(18px, 2.2vw, 36px);   /* volle Breite, knapperer Rand */
  --pad-top: clamp(28px, 3vw, 44px);

  /* ---- Motion -------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* =============================================================
   Dark Theme — nur Oberflächen; Akzente bleiben.
   ============================================================= */
:root[data-theme="dark"] {
  --bg:            #0B0B0D;
  --surface:       #141416;
  --surface-2:     #191919;
  --surface-hover: #1C1C1F;
  --hairline:      #242428;
  --hairline-strong: #313136;

  --text-strong: #F4F4F5;
  --text:        #C7C7CE;
  --text-muted:  #8A8A93;
  --text-faint:  #5E5E67;

  --accent-soft:   rgba(94, 99, 214, 0.18);
  --accent-line:   rgba(94, 99, 214, 0.32);
  --accent-2-soft: rgba(31, 168, 144, 0.16);

  --st-planned: var(--n-600);
  --st-transit: var(--n-400);
  --st-done:    var(--n-200);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
}