/**
 * invisible Design Tokens — Single Source of Truth.
 *
 * Drei Ebenen:
 *  1) Primitives  (--inv-color-amber-500)   — Farbpalette, Skalen
 *  2) Semantic    (--inv-color-brand)       — bedeutungstragende Aliase
 *  3) Component   (--inv-button-bg, später) — komponenten-spezifisch
 *
 * Neue Komponenten konsumieren Semantic-Tokens; spezielle Bedarfe
 * fügen Component-Tokens zusätzlich hinzu (in iamgreat-base.css).
 */

:root {
	/* === COLOR PRIMITIVES (Skala) === */
	--inv-color-slate-50:  #f9fafb;
	--inv-color-slate-100: #f3f4f6;
	--inv-color-slate-200: #e5e7eb;
	--inv-color-slate-300: #d1d5db;
	--inv-color-slate-500: #6b7280;
	--inv-color-slate-700: #374151;
	--inv-color-slate-800: #1f2937;
	--inv-color-slate-900: #111827;
	--inv-color-slate-950: #0f172a;

	--inv-color-blue-700: #1e3a8a;
	--inv-color-blue-800: #1e40af;

	--inv-color-amber-50:  #fffbeb;
	--inv-color-amber-100: #fef3c7;
	--inv-color-amber-300: #fcd34d;
	--inv-color-amber-500: #f59e0b;
	--inv-color-amber-600: #d97706;
	--inv-color-amber-700: #b45309;
	--inv-color-amber-800: #92400e;

	--inv-color-green-500: #10b981;
	--inv-color-red-500:   #ef4444;

	/* === COLOR SEMANTIC === */
	--inv-color-bg:           #ffffff;
	--inv-color-bg-muted:     var(--inv-color-slate-50);
	--inv-color-bg-subtle:    var(--inv-color-slate-100);

	--inv-color-fg:           var(--inv-color-slate-900);
	--inv-color-fg-muted:     var(--inv-color-slate-500);
	--inv-color-fg-subtle:    var(--inv-color-slate-700);
	--inv-color-fg-inverse:   #ffffff;

	--inv-color-border:       var(--inv-color-slate-200);
	--inv-color-border-strong:var(--inv-color-slate-300);

	--inv-color-brand:        var(--inv-color-amber-500);
	--inv-color-brand-hover:  var(--inv-color-amber-600);
	--inv-color-brand-fg:     var(--inv-color-slate-900);
	--inv-color-brand-soft:   var(--inv-color-amber-100);
	--inv-color-brand-strong: var(--inv-color-amber-800);

	--inv-color-dark:         var(--inv-color-slate-900);
	--inv-color-dark-fg:      #ffffff;

	--inv-color-accent:       var(--inv-color-blue-700);

	--inv-color-success:      var(--inv-color-green-500);
	--inv-color-danger:       var(--inv-color-red-500);

	/* === SPACING (8-Punkt-Skala) === */
	--inv-space-1:  4px;
	--inv-space-2:  8px;
	--inv-space-3:  12px;
	--inv-space-4:  16px;
	--inv-space-5:  20px;
	--inv-space-6:  24px;
	--inv-space-7:  28px;
	--inv-space-8:  32px;
	--inv-space-10: 40px;
	--inv-space-12: 48px;
	--inv-space-16: 64px;
	--inv-space-20: 80px;
	--inv-space-24: 96px;
	--inv-space-32: 128px;

	/* === RADIUS === */
	--inv-radius-sm:   4px;
	--inv-radius-md:   8px;
	--inv-radius-lg:   12px;
	--inv-radius-xl:   16px;
	--inv-radius-full: 9999px;

	/* === SHADOW === */
	--inv-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
	--inv-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
	--inv-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
	--inv-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.12);
	--inv-shadow-glow: 0 8px 32px rgba(245, 158, 11, 0.20);

	/* === TYPOGRAPHY === */
	--inv-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--inv-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--inv-font-mono:  'Menlo', 'Consolas', monospace;

	--inv-font-size-xs:   0.75rem;
	--inv-font-size-sm:   0.875rem;
	--inv-font-size-base: 1rem;
	--inv-font-size-lg:   1.125rem;
	--inv-font-size-xl:   1.25rem;
	--inv-font-size-2xl:  1.5rem;
	--inv-font-size-3xl:  2.25rem;
	--inv-font-size-4xl:  clamp(2.25rem, 5vw, 3.5rem);
	--inv-font-size-5xl:  clamp(3rem, 6vw, 4.5rem);

	--inv-font-weight-normal:     400;
	--inv-font-weight-medium:     500;
	--inv-font-weight-semibold:   600;
	--inv-font-weight-bold:       700;
	--inv-font-weight-extrabold:  800;

	--inv-line-height-tight:    1.1;
	--inv-line-height-snug:     1.3;
	--inv-line-height-normal:   1.5;
	--inv-line-height-relaxed:  1.65;

	/* === TRANSITION === */
	--inv-transition-fast: 0.15s ease;
	--inv-transition-base: 0.25s ease;
	--inv-transition-slow: 0.4s ease;

	/* === LAYOUT === */
	--inv-container-max:     1140px;
	--inv-container-wide:    1280px;
	--inv-container-narrow:  720px;
	--inv-container-prose:   640px;
}