/* Named colors.
   Hex lives only in the two blocks below. Everything after "utilities"
   uses primary, secondary, tertiary, or one of the other names.
   Brand: primary, secondary, tertiary.
   Page and type: background, surface, text.
   Status: info, success, danger, warning, accent, indigo, teal, orange, pink, sky. */

:root {
  --color-primary: #1f2937;
  --color-primary-light: #374151;
  --color-primary-dark: #111827;
  --color-secondary: #10b981;
  --color-secondary-light: #6ee7b7;
  --color-secondary-dark: #047857;
  --color-tertiary: #9ca3af;
  --color-tertiary-light: #d1d5db;
  --color-tertiary-dark: #6b7280;
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-surface-subtle: #f3f4f6;
  --color-surface-strong: #e5e7eb;
  --color-surface-emphasis: #f8f9fa;
  --color-surface-disabled: #e9ecef;
  --color-neutral-bg-300: #d1d5db;
  --color-fill: #6b7280;
  --color-fill-strong: #4b5563;
  --color-neutral-bg-700: #374151;
  --color-overlay: #000000;
  --color-text: #111827;
  --color-text-heading: #1f2937;
  --color-text-body: #374151;
  --color-text-soft: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;
  --color-text-quiet: #d1d5db;
  --color-text-inverse: #f3f4f6;
  --color-text-on-fill: #ffffff;
  --color-text-main: #333333;
  --color-text-header: #111827;
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-subtle: #f3f4f6;
  --color-border-muted: #dee2e6;
  --color-neutral-border-400: #9ca3af;
  --color-neutral-border-600: #4b5563;
  --color-neutral-border-700: #374151;
  --color-hover-muted: #f9fafb;
  --color-hover-subtle: #f3f4f6;
  --color-hover-mid: #9ca3af;
  --color-hover-fill: #4b5563;
  --color-hover-strong: #374151;
  --color-background: #f9fafb;
  --color-input-bg: #ffffff;
  --color-input-text: #111827;
  --color-input-border: #6b7280;
  --color-header-field-bg: #ffffff;
  --color-header-field-text: #1f2937;
  --color-table-head-bg: #f8f9fa;
  --color-table-head-text: #495057;
  --color-table-hover: #f1f5f9;
  --color-table-stripe: #f9fafb;
  --color-link: #047857;
  --color-link-hover: #10b981;
  --color-action: #1f2937;
  --color-action-border: #1f2937;
  --color-highlight: #fbbf24;
  --color-feedback-danger: #dc3545;
  --color-feedback-danger-bg: #f8d7da;
  --color-accent-bg-soft: #f3e8ff;
  --color-chart-1: #10b981;
  --color-chart-2: #3b82f6;
  --color-chart-3: #f59e0b;
  --color-chart-4: #ef4444;
  --color-chart-5: #8b5cf6;
  --color-chart-6: #06b6d4;
  --color-series-success: #059669;
  --color-series-info: #2563eb;
  --color-series-warning: #d97706;
  --color-series-danger: #dc2626;
  --color-series-accent: #7c3aed;
  --color-series-cyan: #0891b2;
  --color-info-bg-50: #eff6ff;
  --color-info-fg-50: #eff6ff;
  --color-info-border-50: #eff6ff;
  --color-info-bg-100: #dbeafe;
  --color-info-fg-100: #dbeafe;
  --color-info-border-100: #dbeafe;
  --color-info-bg-200: #bfdbfe;
  --color-info-fg-200: #bfdbfe;
  --color-info-border-200: #bfdbfe;
  --color-info-bg-300: #93c5fd;
  --color-info-fg-300: #93c5fd;
  --color-info-border-300: #93c5fd;
  --color-info-bg-400: #60a5fa;
  --color-info-fg-400: #60a5fa;
  --color-info-border-400: #60a5fa;
  --color-info-bg-500: #3b82f6;
  --color-info-fg-500: #3b82f6;
  --color-info-border-500: #3b82f6;
  --color-info-bg-600: #2563eb;
  --color-info-fg-600: #2563eb;
  --color-info-border-600: #2563eb;
  --color-info-bg-700: #1d4ed8;
  --color-info-fg-700: #1d4ed8;
  --color-info-border-700: #1d4ed8;
  --color-info-bg-800: #1e40af;
  --color-info-fg-800: #1e40af;
  --color-info-border-800: #1e40af;
  --color-info-bg-900: #1e3a8a;
  --color-info-fg-900: #1e3a8a;
  --color-info-border-900: #1e3a8a;
  --color-success-bg-50: #ecfdf5;
  --color-success-fg-50: #ecfdf5;
  --color-success-border-50: #ecfdf5;
  --color-success-bg-100: #d1fae5;
  --color-success-fg-100: #d1fae5;
  --color-success-border-100: #d1fae5;
  --color-success-bg-200: #a7f3d0;
  --color-success-fg-200: #a7f3d0;
  --color-success-border-200: #a7f3d0;
  --color-success-bg-300: #6ee7b7;
  --color-success-fg-300: #6ee7b7;
  --color-success-border-300: #6ee7b7;
  --color-success-bg-500: #10b981;
  --color-success-fg-500: #10b981;
  --color-success-border-500: #10b981;
  --color-success-bg-600: #059669;
  --color-success-fg-600: #059669;
  --color-success-border-600: #059669;
  --color-success-bg-700: #047857;
  --color-success-fg-700: #047857;
  --color-success-border-700: #047857;
  --color-success-bg-800: #065f46;
  --color-success-fg-800: #065f46;
  --color-success-border-800: #065f46;
  --color-success-bg-900: #064e3b;
  --color-success-fg-900: #064e3b;
  --color-success-border-900: #064e3b;
  --color-danger-bg-50: #fef2f2;
  --color-danger-fg-50: #fef2f2;
  --color-danger-border-50: #fef2f2;
  --color-danger-bg-100: #fee2e2;
  --color-danger-fg-100: #fee2e2;
  --color-danger-border-100: #fee2e2;
  --color-danger-bg-200: #fecaca;
  --color-danger-fg-200: #fecaca;
  --color-danger-border-200: #fecaca;
  --color-danger-bg-300: #fca5a5;
  --color-danger-fg-300: #fca5a5;
  --color-danger-border-300: #fca5a5;
  --color-danger-bg-400: #f87171;
  --color-danger-fg-400: #f87171;
  --color-danger-border-400: #f87171;
  --color-danger-bg-500: #ef4444;
  --color-danger-fg-500: #ef4444;
  --color-danger-border-500: #ef4444;
  --color-danger-bg-600: #dc2626;
  --color-danger-fg-600: #dc2626;
  --color-danger-border-600: #dc2626;
  --color-danger-bg-700: #b91c1c;
  --color-danger-fg-700: #b91c1c;
  --color-danger-border-700: #b91c1c;
  --color-danger-bg-800: #991b1b;
  --color-danger-fg-800: #991b1b;
  --color-danger-border-800: #991b1b;
  --color-danger-bg-900: #7f1d1d;
  --color-danger-fg-900: #7f1d1d;
  --color-danger-border-900: #7f1d1d;
  --color-warning-bg-50: #fffbeb;
  --color-warning-fg-50: #fffbeb;
  --color-warning-border-50: #fffbeb;
  --color-warning-bg-100: #fef3c7;
  --color-warning-fg-100: #fef3c7;
  --color-warning-border-100: #fef3c7;
  --color-warning-bg-200: #fde68a;
  --color-warning-fg-200: #fde68a;
  --color-warning-border-200: #fde68a;
  --color-warning-bg-300: #fcd34d;
  --color-warning-fg-300: #fcd34d;
  --color-warning-border-300: #fcd34d;
  --color-warning-bg-400: #fbbf24;
  --color-warning-fg-400: #fbbf24;
  --color-warning-border-400: #fbbf24;
  --color-warning-bg-500: #f59e0b;
  --color-warning-fg-500: #f59e0b;
  --color-warning-border-500: #f59e0b;
  --color-warning-bg-600: #d97706;
  --color-warning-fg-600: #d97706;
  --color-warning-border-600: #d97706;
  --color-warning-bg-700: #b45309;
  --color-warning-fg-700: #b45309;
  --color-warning-border-700: #b45309;
  --color-warning-bg-800: #92400e;
  --color-warning-fg-800: #92400e;
  --color-warning-border-800: #92400e;
  --color-warning-bg-900: #78350f;
  --color-warning-fg-900: #78350f;
  --color-warning-border-900: #78350f;
  --color-accent-bg-50: #f5f3ff;
  --color-accent-fg-50: #f5f3ff;
  --color-accent-border-50: #f5f3ff;
  --color-accent-bg-100: #ede9fe;
  --color-accent-fg-100: #ede9fe;
  --color-accent-border-100: #ede9fe;
  --color-accent-bg-200: #ddd6fe;
  --color-accent-fg-200: #ddd6fe;
  --color-accent-border-200: #ddd6fe;
  --color-accent-bg-300: #c4b5fd;
  --color-accent-fg-300: #c4b5fd;
  --color-accent-border-300: #c4b5fd;
  --color-accent-bg-500: #8b5cf6;
  --color-accent-fg-500: #8b5cf6;
  --color-accent-border-500: #8b5cf6;
  --color-accent-bg-600: #7c3aed;
  --color-accent-fg-600: #7c3aed;
  --color-accent-border-600: #7c3aed;
  --color-accent-bg-700: #6d28d9;
  --color-accent-fg-700: #6d28d9;
  --color-accent-border-700: #6d28d9;
  --color-accent-bg-800: #5b21b6;
  --color-accent-fg-800: #5b21b6;
  --color-accent-border-800: #5b21b6;
  --color-accent-bg-900: #4c1d95;
  --color-accent-fg-900: #4c1d95;
  --color-accent-border-900: #4c1d95;
  --color-indigo-bg-100: #e0e7ff;
  --color-indigo-fg-100: #e0e7ff;
  --color-indigo-border-100: #e0e7ff;
  --color-indigo-bg-200: #c7d2fe;
  --color-indigo-fg-200: #c7d2fe;
  --color-indigo-border-200: #c7d2fe;
  --color-indigo-bg-500: #6366f1;
  --color-indigo-fg-500: #6366f1;
  --color-indigo-border-500: #6366f1;
  --color-indigo-bg-600: #4f46e5;
  --color-indigo-fg-600: #4f46e5;
  --color-indigo-border-600: #4f46e5;
  --color-indigo-bg-700: #4338ca;
  --color-indigo-fg-700: #4338ca;
  --color-indigo-border-700: #4338ca;
  --color-indigo-bg-900: #312e81;
  --color-indigo-fg-900: #312e81;
  --color-indigo-border-900: #312e81;
  --color-teal-bg-50: #f0fdfa;
  --color-teal-fg-50: #f0fdfa;
  --color-teal-border-50: #f0fdfa;
  --color-teal-bg-100: #ccfbf1;
  --color-teal-fg-100: #ccfbf1;
  --color-teal-border-100: #ccfbf1;
  --color-teal-bg-400: #2dd4bf;
  --color-teal-fg-400: #2dd4bf;
  --color-teal-border-400: #2dd4bf;
  --color-teal-bg-500: #14b8a6;
  --color-teal-fg-500: #14b8a6;
  --color-teal-border-500: #14b8a6;
  --color-teal-bg-600: #0d9488;
  --color-teal-fg-600: #0d9488;
  --color-teal-border-600: #0d9488;
  --color-teal-bg-700: #0f766e;
  --color-teal-fg-700: #0f766e;
  --color-teal-border-700: #0f766e;
  --color-teal-bg-800: #115e59;
  --color-teal-fg-800: #115e59;
  --color-teal-border-800: #115e59;
  --color-teal-bg-900: #134e4a;
  --color-teal-fg-900: #134e4a;
  --color-teal-border-900: #134e4a;
  --color-orange-bg-100: #ffedd5;
  --color-orange-fg-100: #ffedd5;
  --color-orange-border-100: #ffedd5;
  --color-orange-bg-200: #fed7aa;
  --color-orange-fg-200: #fed7aa;
  --color-orange-border-200: #fed7aa;
  --color-orange-bg-300: #fdba74;
  --color-orange-fg-300: #fdba74;
  --color-orange-border-300: #fdba74;
  --color-orange-bg-500: #f97316;
  --color-orange-fg-500: #f97316;
  --color-orange-border-500: #f97316;
  --color-orange-bg-600: #ea580c;
  --color-orange-fg-600: #ea580c;
  --color-orange-border-600: #ea580c;
  --color-orange-bg-700: #c2410c;
  --color-orange-fg-700: #c2410c;
  --color-orange-border-700: #c2410c;
  --color-orange-bg-800: #9a3412;
  --color-orange-fg-800: #9a3412;
  --color-orange-border-800: #9a3412;
  --color-orange-bg-900: #7c2d12;
  --color-orange-fg-900: #7c2d12;
  --color-orange-border-900: #7c2d12;
  --color-pink-bg-100: #fce7f3;
  --color-pink-fg-100: #fce7f3;
  --color-pink-border-100: #fce7f3;
  --color-pink-bg-700: #be185d;
  --color-pink-fg-700: #be185d;
  --color-pink-border-700: #be185d;
  --color-pink-bg-800: #9d174d;
  --color-pink-fg-800: #9d174d;
  --color-pink-border-800: #9d174d;
  --color-sky-bg-100: #e0f2fe;
  --color-sky-fg-100: #e0f2fe;
  --color-sky-border-100: #e0f2fe;
  --color-sky-bg-200: #bae6fd;
  --color-sky-fg-200: #bae6fd;
  --color-sky-border-200: #bae6fd;
  --color-sky-bg-500: #0ea5e9;
  --color-sky-fg-500: #0ea5e9;
  --color-sky-border-500: #0ea5e9;
  --color-sky-bg-600: #0284c7;
  --color-sky-fg-600: #0284c7;
  --color-sky-border-600: #0284c7;
  --color-sky-bg-700: #0369a1;
  --color-sky-fg-700: #0369a1;
  --color-sky-border-700: #0369a1;
  --color-sky-bg-900: #0c4a6e;
  --color-sky-fg-900: #0c4a6e;
  --color-sky-border-900: #0c4a6e;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #1f2937;
  --color-primary-light: #4b5563;
  --color-primary-dark: #111827;
  --color-secondary: #10b981;
  --color-secondary-light: #6ee7b7;
  --color-secondary-dark: #047857;
  --color-tertiary: #9ca3af;
  --color-tertiary-light: #d1d5db;
  --color-tertiary-dark: #6b7280;
  --color-surface: #1e293b;
  --color-surface-muted: #172033;
  --color-surface-subtle: #243044;
  --color-surface-strong: #334155;
  --color-surface-emphasis: #1e293b;
  --color-surface-disabled: #334155;
  --color-neutral-bg-300: #475569;
  --color-fill: #64748b;
  --color-fill-strong: #475569;
  --color-neutral-bg-700: #4b5563;
  --color-overlay: #000000;
  --color-text: #f3f4f6;
  --color-text-heading: #f3f4f6;
  --color-text-body: #d1d5db;
  --color-text-soft: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-text-faint: #9ca3af;
  --color-text-quiet: #d1d5db;
  --color-text-inverse: #f3f4f6;
  --color-text-on-fill: #ffffff;
  --color-text-main: #e5e7eb;
  --color-text-header: #f3f4f6;
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-border-subtle: #334155;
  --color-border-muted: #334155;
  --color-neutral-border-400: #64748b;
  --color-neutral-border-600: #64748b;
  --color-neutral-border-700: #94a3b8;
  --color-hover-muted: #334155;
  --color-hover-subtle: #334155;
  --color-hover-mid: #64748b;
  --color-hover-fill: #64748b;
  --color-hover-strong: #4b5563;
  --color-background: #0f172a;
  --color-input-bg: #0f172a;
  --color-input-text: #f3f4f6;
  --color-input-border: #475569;
  --color-header-field-bg: #ffffff;
  --color-header-field-text: #1f2937;
  --color-table-head-bg: #111827;
  --color-table-head-text: #e5e7eb;
  --color-table-hover: #2d3b52;
  --color-table-stripe: #243044;
  --color-link: #6ee7b7;
  --color-link-hover: #a7f3d0;
  --color-action: #334155;
  --color-action-border: #64748b;
  --color-highlight: #fbbf24;
  --color-feedback-danger: #fca5a5;
  --color-feedback-danger-bg: #3f1d24;
  --color-accent-bg-soft: #2e1065;
  --color-chart-1: #10b981;
  --color-chart-2: #3b82f6;
  --color-chart-3: #f59e0b;
  --color-chart-4: #ef4444;
  --color-chart-5: #8b5cf6;
  --color-chart-6: #06b6d4;
  --color-series-success: #6ee7b7;
  --color-series-info: #93c5fd;
  --color-series-warning: #fcd34d;
  --color-series-danger: #fca5a5;
  --color-series-accent: #c4b5fd;
  --color-series-cyan: #67e8f9;
  --color-info-bg-50: #1e3a5f;
  --color-info-fg-50: #93c5fd;
  --color-info-border-50: #334155;
  --color-info-bg-100: #1e3a5f;
  --color-info-fg-100: #93c5fd;
  --color-info-border-100: #334155;
  --color-info-bg-200: #1e3a5f;
  --color-info-fg-200: #93c5fd;
  --color-info-border-200: #334155;
  --color-info-bg-300: #1e3a5f;
  --color-info-fg-300: #93c5fd;
  --color-info-border-300: #93c5fd;
  --color-info-bg-400: #2563eb;
  --color-info-fg-400: #93c5fd;
  --color-info-border-400: #60a5fa;
  --color-info-bg-500: #3b82f6;
  --color-info-fg-500: #93c5fd;
  --color-info-border-500: #3b82f6;
  --color-info-bg-600: #2563eb;
  --color-info-fg-600: #93c5fd;
  --color-info-border-600: #2563eb;
  --color-info-bg-700: #3b82f6;
  --color-info-fg-700: #93c5fd;
  --color-info-border-700: #3b82f6;
  --color-info-bg-800: #1e40af;
  --color-info-fg-800: #93c5fd;
  --color-info-border-800: #60a5fa;
  --color-info-bg-900: #1e3a8a;
  --color-info-fg-900: #93c5fd;
  --color-info-border-900: #93c5fd;
  --color-success-bg-50: #064e3b;
  --color-success-fg-50: #6ee7b7;
  --color-success-border-50: #334155;
  --color-success-bg-100: #064e3b;
  --color-success-fg-100: #6ee7b7;
  --color-success-border-100: #334155;
  --color-success-bg-200: #064e3b;
  --color-success-fg-200: #6ee7b7;
  --color-success-border-200: #6ee7b7;
  --color-success-bg-300: #059669;
  --color-success-fg-300: #6ee7b7;
  --color-success-border-300: #6ee7b7;
  --color-success-bg-500: #10b981;
  --color-success-fg-500: #6ee7b7;
  --color-success-border-500: #10b981;
  --color-success-bg-600: #059669;
  --color-success-fg-600: #6ee7b7;
  --color-success-border-600: #059669;
  --color-success-bg-700: #10b981;
  --color-success-fg-700: #6ee7b7;
  --color-success-border-700: #10b981;
  --color-success-bg-800: #065f46;
  --color-success-fg-800: #6ee7b7;
  --color-success-border-800: #6ee7b7;
  --color-success-bg-900: #064e3b;
  --color-success-fg-900: #6ee7b7;
  --color-success-border-900: #6ee7b7;
  --color-danger-bg-50: #3f1d24;
  --color-danger-fg-50: #fca5a5;
  --color-danger-border-50: #334155;
  --color-danger-bg-100: #3f1d24;
  --color-danger-fg-100: #fca5a5;
  --color-danger-border-100: #334155;
  --color-danger-bg-200: #3f1d24;
  --color-danger-fg-200: #fca5a5;
  --color-danger-border-200: #f87171;
  --color-danger-bg-300: #7f1d1d;
  --color-danger-fg-300: #fca5a5;
  --color-danger-border-300: #fca5a5;
  --color-danger-bg-400: #dc2626;
  --color-danger-fg-400: #fca5a5;
  --color-danger-border-400: #f87171;
  --color-danger-bg-500: #ef4444;
  --color-danger-fg-500: #fca5a5;
  --color-danger-border-500: #ef4444;
  --color-danger-bg-600: #dc2626;
  --color-danger-fg-600: #fca5a5;
  --color-danger-border-600: #dc2626;
  --color-danger-bg-700: #ef4444;
  --color-danger-fg-700: #fca5a5;
  --color-danger-border-700: #f87171;
  --color-danger-bg-800: #991b1b;
  --color-danger-fg-800: #fca5a5;
  --color-danger-border-800: #fca5a5;
  --color-danger-bg-900: #7f1d1d;
  --color-danger-fg-900: #fca5a5;
  --color-danger-border-900: #fca5a5;
  --color-warning-bg-50: #422006;
  --color-warning-fg-50: #fcd34d;
  --color-warning-border-50: #334155;
  --color-warning-bg-100: #422006;
  --color-warning-fg-100: #fcd34d;
  --color-warning-border-100: #334155;
  --color-warning-bg-200: #422006;
  --color-warning-fg-200: #fcd34d;
  --color-warning-border-200: #fbbf24;
  --color-warning-bg-300: #d97706;
  --color-warning-fg-300: #fcd34d;
  --color-warning-border-300: #fcd34d;
  --color-warning-bg-400: #d97706;
  --color-warning-fg-400: #fcd34d;
  --color-warning-border-400: #fbbf24;
  --color-warning-bg-500: #f59e0b;
  --color-warning-fg-500: #fcd34d;
  --color-warning-border-500: #f59e0b;
  --color-warning-bg-600: #d97706;
  --color-warning-fg-600: #fcd34d;
  --color-warning-border-600: #d97706;
  --color-warning-bg-700: #f59e0b;
  --color-warning-fg-700: #fcd34d;
  --color-warning-border-700: #fbbf24;
  --color-warning-bg-800: #92400e;
  --color-warning-fg-800: #fcd34d;
  --color-warning-border-800: #fcd34d;
  --color-warning-bg-900: #78350f;
  --color-warning-fg-900: #fcd34d;
  --color-warning-border-900: #fcd34d;
  --color-accent-bg-50: #2e1065;
  --color-accent-fg-50: #c4b5fd;
  --color-accent-border-50: #334155;
  --color-accent-bg-100: #2e1065;
  --color-accent-fg-100: #c4b5fd;
  --color-accent-border-100: #334155;
  --color-accent-bg-200: #2e1065;
  --color-accent-fg-200: #c4b5fd;
  --color-accent-border-200: #c4b5fd;
  --color-accent-bg-300: #6d28d9;
  --color-accent-fg-300: #c4b5fd;
  --color-accent-border-300: #c4b5fd;
  --color-accent-bg-500: #8b5cf6;
  --color-accent-fg-500: #c4b5fd;
  --color-accent-border-500: #8b5cf6;
  --color-accent-bg-600: #7c3aed;
  --color-accent-fg-600: #c4b5fd;
  --color-accent-border-600: #7c3aed;
  --color-accent-bg-700: #8b5cf6;
  --color-accent-fg-700: #c4b5fd;
  --color-accent-border-700: #c4b5fd;
  --color-accent-bg-800: #5b21b6;
  --color-accent-fg-800: #c4b5fd;
  --color-accent-border-800: #c4b5fd;
  --color-accent-bg-900: #4c1d95;
  --color-accent-fg-900: #c4b5fd;
  --color-accent-border-900: #c4b5fd;
  --color-indigo-bg-100: #1e1b4b;
  --color-indigo-fg-100: #a5b4fc;
  --color-indigo-border-100: #334155;
  --color-indigo-bg-200: #1e1b4b;
  --color-indigo-fg-200: #a5b4fc;
  --color-indigo-border-200: #a5b4fc;
  --color-indigo-bg-500: #6366f1;
  --color-indigo-fg-500: #a5b4fc;
  --color-indigo-border-500: #6366f1;
  --color-indigo-bg-600: #4f46e5;
  --color-indigo-fg-600: #a5b4fc;
  --color-indigo-border-600: #4f46e5;
  --color-indigo-bg-700: #6366f1;
  --color-indigo-fg-700: #a5b4fc;
  --color-indigo-border-700: #a5b4fc;
  --color-indigo-bg-900: #312e81;
  --color-indigo-fg-900: #a5b4fc;
  --color-indigo-border-900: #a5b4fc;
  --color-teal-bg-50: #134e4a;
  --color-teal-fg-50: #5eead4;
  --color-teal-border-50: #334155;
  --color-teal-bg-100: #134e4a;
  --color-teal-fg-100: #5eead4;
  --color-teal-border-100: #334155;
  --color-teal-bg-400: #0d9488;
  --color-teal-fg-400: #5eead4;
  --color-teal-border-400: #2dd4bf;
  --color-teal-bg-500: #14b8a6;
  --color-teal-fg-500: #5eead4;
  --color-teal-border-500: #14b8a6;
  --color-teal-bg-600: #0d9488;
  --color-teal-fg-600: #5eead4;
  --color-teal-border-600: #0d9488;
  --color-teal-bg-700: #14b8a6;
  --color-teal-fg-700: #5eead4;
  --color-teal-border-700: #5eead4;
  --color-teal-bg-800: #115e59;
  --color-teal-fg-800: #5eead4;
  --color-teal-border-800: #5eead4;
  --color-teal-bg-900: #134e4a;
  --color-teal-fg-900: #5eead4;
  --color-teal-border-900: #5eead4;
  --color-orange-bg-100: #431407;
  --color-orange-fg-100: #fdba74;
  --color-orange-border-100: #334155;
  --color-orange-bg-200: #431407;
  --color-orange-fg-200: #fdba74;
  --color-orange-border-200: #fdba74;
  --color-orange-bg-300: #c2410c;
  --color-orange-fg-300: #fdba74;
  --color-orange-border-300: #fdba74;
  --color-orange-bg-500: #f97316;
  --color-orange-fg-500: #fdba74;
  --color-orange-border-500: #f97316;
  --color-orange-bg-600: #ea580c;
  --color-orange-fg-600: #fdba74;
  --color-orange-border-600: #ea580c;
  --color-orange-bg-700: #f97316;
  --color-orange-fg-700: #fdba74;
  --color-orange-border-700: #fdba74;
  --color-orange-bg-800: #9a3412;
  --color-orange-fg-800: #fdba74;
  --color-orange-border-800: #fdba74;
  --color-orange-bg-900: #7c2d12;
  --color-orange-fg-900: #fdba74;
  --color-orange-border-900: #fdba74;
  --color-pink-bg-100: #500724;
  --color-pink-fg-100: #f9a8d4;
  --color-pink-border-100: #334155;
  --color-pink-bg-700: #f9a8d4;
  --color-pink-fg-700: #f9a8d4;
  --color-pink-border-700: #f9a8d4;
  --color-pink-bg-800: #9d174d;
  --color-pink-fg-800: #f9a8d4;
  --color-pink-border-800: #f9a8d4;
  --color-sky-bg-100: #1e3a5f;
  --color-sky-fg-100: #7dd3fc;
  --color-sky-border-100: #334155;
  --color-sky-bg-200: #1e3a5f;
  --color-sky-fg-200: #7dd3fc;
  --color-sky-border-200: #334155;
  --color-sky-bg-500: #0ea5e9;
  --color-sky-fg-500: #7dd3fc;
  --color-sky-border-500: #0ea5e9;
  --color-sky-bg-600: #0284c7;
  --color-sky-fg-600: #7dd3fc;
  --color-sky-border-600: #0284c7;
  --color-sky-bg-700: #38bdf8;
  --color-sky-fg-700: #7dd3fc;
  --color-sky-border-700: #7dd3fc;
  --color-sky-bg-900: #0c4a6e;
  --color-sky-fg-900: #7dd3fc;
  --color-sky-border-900: #7dd3fc;
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-light: var(--color-surface);
  --bs-secondary-bg: var(--color-surface);
  --bs-tertiary-bg: var(--color-surface-strong);
  background-color: var(--color-background);
  color: var(--color-text);
}

/* utilities */

.bg-page {
  background-color: var(--color-background) !important;
}

.bg-surface {
  background-color: var(--color-surface) !important;
}

.bg-surface-muted {
  background-color: var(--color-surface-muted) !important;
}

.bg-surface-subtle {
  background-color: var(--color-surface-subtle) !important;
}

.inventory-history th,
.inventory-history td {
  background-color: transparent !important;
}

.bg-white {
  background-color: var(--color-surface) !important;
}

.bg-black {
  background-color: var(--color-overlay) !important;
}

.bg-gray-50 {
  background-color: var(--color-surface-muted) !important;
}

.bg-gray-100 {
  background-color: var(--color-surface-subtle) !important;
}

.bg-gray-200 {
  background-color: var(--color-surface-strong) !important;
}

.bg-gray-300 {
  background-color: var(--color-neutral-bg-300) !important;
}

.bg-gray-500 {
  background-color: var(--color-fill) !important;
}

.bg-gray-600 {
  background-color: var(--color-fill-strong) !important;
}

.text-black {
  color: var(--color-text) !important;
}

.hover\:text-black:hover {
  color: var(--color-text) !important;
}

.text-gray-900 {
  color: var(--color-text) !important;
}

.hover\:text-gray-900:hover {
  color: var(--color-text) !important;
}

.text-gray-800 {
  color: var(--color-text-heading) !important;
}

.hover\:text-gray-800:hover {
  color: var(--color-text-heading) !important;
}

.text-gray-700 {
  color: var(--color-text-body) !important;
}

.hover\:text-gray-700:hover {
  color: var(--color-text-body) !important;
}

.text-gray-600 {
  color: var(--color-text-soft) !important;
}

.hover\:text-gray-600:hover {
  color: var(--color-text-soft) !important;
}

.text-gray-500 {
  color: var(--color-text-muted) !important;
}

.hover\:text-gray-500:hover {
  color: var(--color-text-muted) !important;
}

.text-gray-400 {
  color: var(--color-text-faint) !important;
}

.hover\:text-gray-400:hover {
  color: var(--color-text-faint) !important;
}

.text-gray-300 {
  color: var(--color-text-quiet) !important;
}

.hover\:text-gray-300:hover {
  color: var(--color-text-quiet) !important;
}

.text-gray-100 {
  color: var(--color-text-inverse) !important;
}

.hover\:text-gray-100:hover {
  color: var(--color-text-inverse) !important;
}

.text-white {
  color: var(--color-text-on-fill) !important;
}

.hover\:text-white:hover {
  color: var(--color-text-on-fill) !important;
}

.border-white {
  border-color: var(--color-surface) !important;
}

.border-gray-100 {
  border-color: var(--color-border-subtle) !important;
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border-subtle) !important;
}

.border-gray-200 {
  border-color: var(--color-border) !important;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border) !important;
}

.border-gray-300 {
  border-color: var(--color-border-strong) !important;
}

.border-gray-400 {
  border-color: var(--color-neutral-border-400) !important;
}

.border-gray-600 {
  border-color: var(--color-neutral-border-600) !important;
}

.border-gray-700 {
  border-color: var(--color-neutral-border-700) !important;
}

.hover\:bg-gray-50:hover {
  background-color: var(--color-hover-muted) !important;
}

.hover\:bg-gray-100:hover {
  background-color: var(--color-hover-subtle) !important;
}

.hover\:bg-gray-400:hover {
  background-color: var(--color-hover-mid) !important;
}

.hover\:bg-gray-600:hover {
  background-color: var(--color-hover-fill) !important;
}

.hover\:bg-gray-700:hover {
  background-color: var(--color-hover-strong) !important;
}

.bg-blue-50 {
  background-color: var(--color-info-bg-50) !important;
}

.bg-blue-100 {
  background-color: var(--color-info-bg-100) !important;
}

.bg-blue-200 {
  background-color: var(--color-info-bg-200) !important;
}

.bg-blue-500 {
  background-color: var(--color-info-bg-500) !important;
}

.bg-blue-600 {
  background-color: var(--color-info-bg-600) !important;
}

.text-blue-300 {
  color: var(--color-info-fg-300) !important;
}

.text-blue-400 {
  color: var(--color-info-fg-400) !important;
}

.text-blue-500 {
  color: var(--color-info-fg-500) !important;
}

.text-blue-600 {
  color: var(--color-info-fg-600) !important;
}

.text-blue-700 {
  color: var(--color-info-fg-700) !important;
}

.text-blue-800 {
  color: var(--color-info-fg-800) !important;
}

.text-blue-900 {
  color: var(--color-info-fg-900) !important;
}

.border-blue-200 {
  border-color: var(--color-info-border-200) !important;
}

.border-blue-500 {
  border-color: var(--color-info-border-500) !important;
}

.border-blue-600 {
  border-color: var(--color-info-border-600) !important;
}

.divide-blue-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-info-border-200) !important;
}

.hover\:bg-blue-600:hover {
  background-color: var(--color-info-bg-600) !important;
}

.hover\:bg-blue-700:hover {
  background-color: var(--color-info-bg-700) !important;
}

.hover\:text-blue-600:hover {
  color: var(--color-info-fg-600) !important;
}

.hover\:text-blue-800:hover {
  color: var(--color-info-fg-800) !important;
}

.hover\:text-blue-900:hover {
  color: var(--color-info-fg-900) !important;
}

.bg-green-50 {
  background-color: var(--color-success-bg-50) !important;
}

.bg-green-100 {
  background-color: var(--color-success-bg-100) !important;
}

.bg-green-200 {
  background-color: var(--color-success-bg-200) !important;
}

.bg-green-500 {
  background-color: var(--color-success-bg-500) !important;
}

.bg-green-600 {
  background-color: var(--color-success-bg-600) !important;
}

.text-green-300 {
  color: var(--color-success-fg-300) !important;
}

.text-green-500 {
  color: var(--color-success-fg-500) !important;
}

.text-green-600 {
  color: var(--color-success-fg-600) !important;
}

.text-green-700 {
  color: var(--color-success-fg-700) !important;
}

.text-green-800 {
  color: var(--color-success-fg-800) !important;
}

.text-green-900 {
  color: var(--color-success-fg-900) !important;
}

.border-green-200 {
  border-color: var(--color-success-border-200) !important;
}

.border-green-400 {
  border-color: var(--color-success-border-300) !important;
}

.border-green-600 {
  border-color: var(--color-success-border-600) !important;
}

.hover\:bg-green-600:hover {
  background-color: var(--color-success-bg-600) !important;
}

.hover\:bg-green-700:hover {
  background-color: var(--color-success-bg-700) !important;
}

.hover\:text-green-700:hover {
  color: var(--color-success-fg-700) !important;
}

.hover\:text-green-800:hover {
  color: var(--color-success-fg-800) !important;
}

.hover\:text-green-900:hover {
  color: var(--color-success-fg-900) !important;
}

.bg-emerald-100 {
  background-color: var(--color-success-bg-100) !important;
}

.text-emerald-300 {
  color: var(--color-success-fg-300) !important;
}

.text-emerald-600 {
  color: var(--color-success-fg-600) !important;
}

.border-emerald-500 {
  border-color: var(--color-success-border-500) !important;
}

.border-emerald-700 {
  border-color: var(--color-success-border-700) !important;
}

.hover\:bg-emerald-50:hover {
  background-color: var(--color-success-bg-50) !important;
}

.hover\:text-emerald-600:hover {
  color: var(--color-success-fg-600) !important;
}

.hover\:text-emerald-700:hover {
  color: var(--color-success-fg-700) !important;
}

.hover\:text-emerald-800:hover {
  color: var(--color-success-fg-800) !important;
}

.bg-red-50 {
  background-color: var(--color-danger-bg-50) !important;
}

.bg-red-100 {
  background-color: var(--color-danger-bg-100) !important;
}

.bg-red-200 {
  background-color: var(--color-danger-bg-200) !important;
}

.bg-red-600 {
  background-color: var(--color-danger-bg-600) !important;
}

.text-red-300 {
  color: var(--color-danger-fg-300) !important;
}

.text-red-400 {
  color: var(--color-danger-fg-400) !important;
}

.text-red-500 {
  color: var(--color-danger-fg-500) !important;
}

.text-red-600 {
  color: var(--color-danger-fg-600) !important;
}

.text-red-700 {
  color: var(--color-danger-fg-700) !important;
}

.text-red-800 {
  color: var(--color-danger-fg-800) !important;
}

.text-red-900 {
  color: var(--color-danger-fg-900) !important;
}

.border-red-200 {
  border-color: var(--color-danger-border-200) !important;
}

.border-red-300 {
  border-color: var(--color-danger-border-300) !important;
}

.border-red-400 {
  border-color: var(--color-danger-border-400) !important;
}

.border-red-500 {
  border-color: var(--color-danger-border-500) !important;
}

.border-red-600 {
  border-color: var(--color-danger-border-600) !important;
}

.hover\:bg-red-50:hover {
  background-color: var(--color-danger-bg-50) !important;
}

.hover\:bg-red-500:hover {
  background-color: var(--color-danger-bg-500) !important;
}

.hover\:bg-red-700:hover {
  background-color: var(--color-danger-bg-700) !important;
}

.hover\:text-red-700:hover {
  color: var(--color-danger-fg-700) !important;
}

.hover\:text-red-900:hover {
  color: var(--color-danger-fg-900) !important;
}

.bg-yellow-50 {
  background-color: var(--color-warning-bg-50) !important;
}

.bg-yellow-100 {
  background-color: var(--color-warning-bg-100) !important;
}

.bg-yellow-200 {
  background-color: var(--color-warning-bg-200) !important;
}

.bg-yellow-500 {
  background-color: var(--color-warning-bg-500) !important;
}

.text-yellow-300 {
  color: var(--color-warning-fg-300) !important;
}

.text-yellow-400 {
  color: var(--color-warning-fg-400) !important;
}

.text-yellow-500 {
  color: var(--color-warning-fg-500) !important;
}

.text-yellow-600 {
  color: var(--color-warning-fg-600) !important;
}

.text-yellow-700 {
  color: var(--color-warning-fg-700) !important;
}

.text-yellow-800 {
  color: var(--color-warning-fg-800) !important;
}

.text-yellow-900 {
  color: var(--color-warning-fg-900) !important;
}

.border-yellow-200 {
  border-color: var(--color-warning-border-200) !important;
}

.border-yellow-300 {
  border-color: var(--color-warning-border-300) !important;
}

.border-yellow-400 {
  border-color: var(--color-warning-border-400) !important;
}

.divide-yellow-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-warning-border-200) !important;
}

.hover\:bg-yellow-50:hover {
  background-color: var(--color-warning-bg-50) !important;
}

.text-amber-700 {
  color: var(--color-warning-fg-700) !important;
}

.bg-purple-50 {
  background-color: var(--color-accent-bg-50) !important;
}

.bg-purple-100 {
  background-color: var(--color-accent-bg-100) !important;
}

.bg-purple-200 {
  background-color: var(--color-accent-bg-200) !important;
}

.bg-purple-500 {
  background-color: var(--color-accent-bg-500) !important;
}

.bg-purple-600 {
  background-color: var(--color-accent-bg-600) !important;
}

.text-purple-300 {
  color: var(--color-accent-fg-300) !important;
}

.text-purple-500 {
  color: var(--color-accent-fg-500) !important;
}

.text-purple-600 {
  color: var(--color-accent-fg-600) !important;
}

.text-purple-700 {
  color: var(--color-accent-fg-700) !important;
}

.text-purple-800 {
  color: var(--color-accent-fg-800) !important;
}

.text-purple-900 {
  color: var(--color-accent-fg-900) !important;
}

.border-purple-200 {
  border-color: var(--color-accent-border-200) !important;
}

.border-purple-500 {
  border-color: var(--color-accent-border-500) !important;
}

.hover\:bg-purple-700:hover {
  background-color: var(--color-accent-bg-700) !important;
}

.hover\:text-purple-900:hover {
  color: var(--color-accent-fg-900) !important;
}

.bg-indigo-100 {
  background-color: var(--color-indigo-bg-100) !important;
}

.bg-indigo-200 {
  background-color: var(--color-indigo-bg-200) !important;
}

.bg-indigo-600 {
  background-color: var(--color-indigo-bg-600) !important;
}

.text-indigo-500 {
  color: var(--color-indigo-fg-500) !important;
}

.text-indigo-600 {
  color: var(--color-indigo-fg-600) !important;
}

.text-indigo-700 {
  color: var(--color-indigo-fg-700) !important;
}

.text-indigo-900 {
  color: var(--color-indigo-fg-900) !important;
}

.border-indigo-200 {
  border-color: var(--color-indigo-border-200) !important;
}

.border-indigo-500 {
  border-color: var(--color-indigo-border-500) !important;
}

.hover\:bg-indigo-700:hover {
  background-color: var(--color-indigo-bg-700) !important;
}

.hover\:text-indigo-900:hover {
  color: var(--color-indigo-fg-900) !important;
}

.bg-teal-50 {
  background-color: var(--color-teal-bg-50) !important;
}

.bg-teal-100 {
  background-color: var(--color-teal-bg-100) !important;
}

.text-teal-500 {
  color: var(--color-teal-fg-500) !important;
}

.text-teal-600 {
  color: var(--color-teal-fg-600) !important;
}

.text-teal-700 {
  color: var(--color-teal-fg-700) !important;
}

.text-teal-800 {
  color: var(--color-teal-fg-800) !important;
}

.text-teal-900 {
  color: var(--color-teal-fg-900) !important;
}

.border-teal-200 {
  border-color: var(--color-teal-border-200) !important;
}

.border-teal-400 {
  border-color: var(--color-teal-border-400) !important;
}

.bg-orange-100 {
  background-color: var(--color-orange-bg-100) !important;
}

.bg-orange-200 {
  background-color: var(--color-orange-bg-200) !important;
}

.bg-orange-600 {
  background-color: var(--color-orange-bg-600) !important;
}

.text-orange-300 {
  color: var(--color-orange-fg-300) !important;
}

.text-orange-500 {
  color: var(--color-orange-fg-500) !important;
}

.text-orange-600 {
  color: var(--color-orange-fg-600) !important;
}

.text-orange-800 {
  color: var(--color-orange-fg-800) !important;
}

.text-orange-900 {
  color: var(--color-orange-fg-900) !important;
}

.border-orange-200 {
  border-color: var(--color-orange-border-200) !important;
}

.border-orange-500 {
  border-color: var(--color-orange-border-500) !important;
}

.border-orange-600 {
  border-color: var(--color-orange-border-600) !important;
}

.hover\:bg-orange-700:hover {
  background-color: var(--color-orange-bg-700) !important;
}

.hover\:text-orange-800:hover {
  color: var(--color-orange-fg-800) !important;
}

.bg-pink-100 {
  background-color: var(--color-pink-bg-100) !important;
}

.text-pink-800 {
  color: var(--color-pink-fg-800) !important;
}

.text-sky-500 {
  color: var(--color-sky-fg-500) !important;
}

.text-sky-600 {
  color: var(--color-sky-fg-600) !important;
}

.text-sky-900 {
  color: var(--color-sky-fg-900) !important;
}

.border-sky-200 {
  border-color: var(--color-sky-border-200) !important;
}

/* Page, cards, type, fields, and tables follow the same names. */

body {
  background-color: var(--color-background);
  color: var(--color-text);
}

body.bg-gray-50 {
  background-color: var(--color-background) !important;
}

header input {
  background-color: var(--color-header-field-bg);
  color: var(--color-header-field-text);
}

html[data-theme="dark"] .table {
  background-color: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 9999px var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  border-top-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead > tr > * {
  background-color: var(--color-table-head-bg);
  box-shadow: inset 0 0 0 9999px var(--color-table-head-bg);
  color: var(--color-table-head-text);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: var(--color-table-stripe);
  box-shadow: inset 0 0 0 9999px var(--color-table-stripe);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--color-table-hover);
  box-shadow: inset 0 0 0 9999px var(--color-table-hover);
}

html[data-theme="dark"] .btn-primary-custom,
html[data-theme="dark"] .btn-form-primary {
  background-color: var(--color-action);
  border-color: var(--color-action-border);
  color: var(--color-text-on-fill);
}

html[data-theme="dark"] .bg-light {
  background-color: var(--color-surface) !important;
  color: var(--color-text);
}

html[data-theme="dark"] .allauth-form-inner-content label,
html[data-theme="dark"] .allauth-form-title {
  color: var(--color-text);
}

html[data-theme="dark"] .allauth-form-inner-content input,
html[data-theme="dark"] .allauth-form-inner-content select {
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
  border-color: var(--color-input-border);
}

html[data-theme="dark"] .allauth-form-inner-content .errorlist,
html[data-theme="dark"] .allauth-messages .message.error {
  color: var(--color-danger-fg-300);
  background-color: var(--color-danger-bg-50);
  border-color: var(--color-danger-border-600);
}

html[data-theme="dark"] .allauth-messages .message.success {
  color: var(--color-success-fg-300);
  background-color: var(--color-success-bg-50);
  border-color: var(--color-success-border-600);
}

html[data-theme="dark"] .allauth-messages .message.info {
  color: var(--color-info-fg-300);
  background-color: var(--color-info-bg-50);
  border-color: var(--color-info-border-600);
}

html[data-theme="dark"] .allauth-messages .message.warning {
  color: var(--color-warning-fg-300);
  background-color: var(--color-warning-bg-50);
  border-color: var(--color-warning-border-600);
}

/* Panel and page copy uses one foreground.
   Links use the link color. Chips keep the status color on their own fill.
   Amounts in green, red, and yellow stay status colors. */

a.text-blue-600,
a.text-indigo-600,
a.text-sky-600,
a.text-teal-600,
a.text-purple-700,
a.text-emerald-600 {
  color: var(--color-link) !important;
}

a.hover\:text-blue-800:hover,
a.hover\:text-blue-900:hover,
a.hover\:text-indigo-900:hover,
a.hover\:text-purple-900:hover,
a.hover\:text-emerald-700:hover,
a.hover\:text-emerald-800:hover {
  color: var(--color-link-hover) !important;
}

.text-blue-600:not(a):not([class*="bg-"]),
.text-blue-800:not(a):not([class*="bg-"]),
.text-blue-900:not(a):not([class*="bg-"]),
.text-indigo-600:not(a):not([class*="bg-"]),
.text-indigo-900:not(a):not([class*="bg-"]),
.text-purple-900:not(a):not([class*="bg-"]),
.text-teal-900:not(a):not([class*="bg-"]),
.text-sky-600:not(a):not([class*="bg-"]),
.text-sky-900:not(a):not([class*="bg-"]) {
  color: var(--color-text) !important;
}

.text-blue-700:not(a):not([class*="bg-"]),
.text-indigo-700:not(a):not([class*="bg-"]),
.text-teal-700:not(a):not([class*="bg-"]),
.text-teal-800:not(a):not([class*="bg-"]),
.text-blue-300:not([class*="bg-"]),
.text-blue-400:not([class*="bg-"]),
.text-blue-500:not(a):not([class*="bg-"]),
.text-indigo-500:not([class*="bg-"]),
.text-purple-300:not([class*="bg-"]),
.text-purple-500:not([class*="bg-"]),
.text-sky-500:not([class*="bg-"]),
.text-teal-500:not([class*="bg-"]) {
  color: var(--color-text-muted) !important;
}