/* ================================================================
   fabric-stock24 – DESIGN TOKENS
   Einzige Quelle aller CSS-Variablen. Niemals Werte hardcoden.
   Fonts: Outfit (headings) + Plus Jakarta Sans (body)
   Palette: Emerald-Green (primary) · Slate (neutrals) · Amber (accent)
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {

  /* ── Typografie ───────────────────────────────────── */
  --font-head: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* ── Primär: Emerald Green ────────────────────────── */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;

  /* ── Semantische Primär-Aliase ────────────────────── */
  --primary:     var(--green-600);
  --primary-h:   var(--green-700);   /* hover */
  --primary-l:   var(--green-50);    /* light bg */
  --primary-mid: var(--green-500);   /* mid tone */

  /* ── Neutrals: Slate ──────────────────────────────── */
  --ink:      #0f172a;   /* slate-900 */
  --ink-2:    #1e293b;   /* slate-800 */
  --ink-3:    #334155;   /* slate-700 */
  --muted:    #64748b;   /* slate-500 */
  --subtle:   #94a3b8;   /* slate-400 */
  --border:   #e2e8f0;   /* slate-200 */
  --border-2: #cbd5e1;   /* slate-300 */
  --surface:  #f8fafc;   /* slate-50  */
  --white:    #ffffff;

  /* ── Akzent: Amber ────────────────────────────────── */
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-50:  #fffbeb;

  /* ── Semantisch: Erfolg / Warnung / Fehler / Info ─── */
  --success:   #059669;
  --success-h: #047857;
  --success-l: #ecfdf5;

  --warning:   #d97706;
  --warning-h: #b45309;
  --warning-l: #fffbeb;

  --danger:    #dc2626;
  --danger-h:  #b91c1c;
  --danger-l:  #fef2f2;

  --info:      #0284c7;
  --info-l:    #f0f9ff;

  /* ── Premium / Gold ───────────────────────────────── */
  --gold:      #f59e0b;
  --gold-l:    #fffbeb;
  --premium-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  /* ── Radien ───────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* ── Schatten ─────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.07);
  --shadow:    0 4px 20px rgba(15,23,42,.08);
  --shadow-md: 0 6px 24px rgba(15,23,42,.10);
  --shadow-lg: 0 8px 40px rgba(15,23,42,.12);
  --shadow-xl: 0 16px 56px rgba(15,23,42,.15);

  /* Farbige Schatten */
  --shadow-green: 0 8px 32px rgba(5,150,105,.25);
  --shadow-gold:  0 6px 24px rgba(245,158,11,.30);

  /* ── Layout ───────────────────────────────────────── */
  --nav-h:      68px;
  --sidebar-w:  248px;
  --container:  1280px;

  /* ── Übergänge ────────────────────────────────────── */
  --ease:       cubic-bezier(.4,0,.2,1);
  --t-fast:     120ms var(--ease);
  --t-base:     200ms var(--ease);
  --t-slow:     350ms var(--ease);

  /* ── Abstände (8px-Raster) ────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
}