/*
 * StaFlow Design Tokens
 * Zentrale Source of Truth fuer Farben, Abstaende, Schatten und Bewegungen.
 */

:root {
    /* Primitive color palette */
    --color-white: #fff;
    --color-black: #000;
    --color-ink: #111111;
    --color-text-legacy: #333;
    --color-text-muted-legacy: #666;
    --color-border-legacy: #ccc;
    --color-border-light-legacy: #ddd;
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f0f0f0;
    --color-neutral-200: #e5e5e5;
    --color-page-bg: #f5f7fa;

    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-bootstrap: #007bff;
    --color-blue-border-soft: #cbd5f5;

    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-500: #0ea5e9;
    --color-sky-700: #0369a1;
    --color-cyan-100: #d1ecf1;
    --color-cyan-500: #17a2b8;
    --color-cyan-600: #0891b2;

    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;

    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-300: #fca5a5;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;

    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-orange-50: #fff7ed;
    --color-orange-200: #fed7aa;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;
    --color-orange-800: #9a3412;
    --color-orange-900: #7c2d12;
    --color-yellow-100: #fef9c3;
    --color-yellow-50: #fefce8;
    --color-yellow-200: #fff9c4;
    --color-yellow-400: #facc15;
    --color-yellow-500: #eab308;
    --color-yellow-600: #ca8a04;
    --color-yellow-700: #a16207;
    --color-yellow-900: #854d0e;

    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-purple-50: #f5f3ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #ddd6fe;
    --color-purple-400: #a78bfa;
    --color-purple-500: #8b5cf6;
    --color-purple-550: #9333ea;
    --color-purple-600: #7c3aed;
    --color-purple-650: #a855f7;
    --color-purple-700: #6d28d9;
    --color-purple-800: #6b21a8;
    --color-purple-900: #5b21b6;
    --color-pink-50: #fdf2f8;
    --color-pink-200: #fbcfe8;
    --color-pink-700: #be185d;

    --color-bootstrap-light: #f8f9fa;
    --color-bootstrap-border-light: #e9ecef;
    --color-bootstrap-border: #dee2e6;
    --color-bootstrap-dark: #212529;
    --color-bootstrap-muted: #6c757d;
    --color-bootstrap-success: #28a745;
    --color-bootstrap-danger: #dc3545;
    --color-bootstrap-warning: #ffc107;
    --color-bootstrap-warning-bg: #fff3cd;
    --color-bootstrap-info: #17a2b8;
    --color-focus-warning: #ffbf47;
    --color-setup-gradient-start: #667eea;
    --color-setup-gradient-end: #764ba2;

    /* Brand & Status */
    --primary-color: var(--color-blue-600);
    --primary-strong: var(--color-blue-500);
    --primary-dark: var(--color-blue-700);
    --primary-light: var(--color-blue-100);
    --secondary-color: var(--color-bootstrap-muted);
    --success-color: var(--color-green-600);
    --success-strong: var(--color-emerald-500);
    --success-dark: var(--color-emerald-600);
    --info-color: var(--color-sky-500);
    --warning-color: var(--color-orange-600);
    --warning-strong: var(--color-amber-500);
    --danger-color: var(--color-red-600);
    --danger-strong: var(--color-red-500);

    /* Neutral */
    --light-color: var(--color-bootstrap-light);
    --dark-color: var(--color-slate-800);
    --dark-gray: var(--color-slate-500);
    --light-gray: var(--color-slate-200);
    --surface-color: var(--color-white);
    --surface-muted: var(--color-slate-50);
    --surface-soft: var(--color-slate-100);
    --surface-border: var(--color-slate-200);
    --surface-border-strong: var(--color-slate-300);
    --text-color: var(--color-slate-800);
    --text-strong: var(--color-slate-900);
    --text-secondary: var(--color-slate-600);
    --text-muted: var(--color-slate-500);
    --text-subtle: var(--color-slate-400);

    /* Feature semantic colors */
    --urlaub-color: #ffd966;
    --krank-color: #b8babb;

    /* Typography */
    --font-family-base: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Shape & depth */
    --border-radius: 0.75rem;
    --border-radius-sm: 0.5rem;
    --box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --page-shell-shadow: 0 0 40px rgba(0, 0, 0, 0.08);

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    --success-gradient: linear-gradient(135deg, var(--success-color), var(--success-dark));
    --info-gradient: linear-gradient(135deg, var(--info-color), #0284c7);
    --warning-gradient: linear-gradient(135deg, var(--warning-color), var(--warning-strong));
    --danger-gradient: linear-gradient(135deg, var(--danger-color), var(--color-red-700));
    --danger-gradient-bright: linear-gradient(135deg, var(--danger-strong), var(--danger-color));
    --neutral-gradient: linear-gradient(135deg, var(--surface-muted) 0%, var(--surface-border) 100%);
    --neutral-gradient-compact: linear-gradient(135deg, var(--surface-muted), var(--surface-border));
    --dark-gradient: linear-gradient(135deg, var(--text-color), var(--color-slate-700));
    --accent-gradient: linear-gradient(90deg, var(--primary-strong), var(--success-strong), var(--warning-strong));

    /* Motion */
    --transition: all 0.2s ease;
    --transition-smooth: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease;
}