/* ================================================================= */
/* KromeOS Design Tokens                                             */
/* Unified CSS custom properties for light & dark themes             */
/* ================================================================= */

:root {
  /* Brand — Indigo for ESS */
  --krome-primary: #4F46E5;
  --krome-primary-hover: #4338CA;
  --krome-primary-light: #EEF2FF;
  --krome-secondary: #6366F1;
  --krome-secondary-hover: #4F46E5;

  /* Semantic */
  --krome-success: #10B981;
  --krome-warning: #F59E0B;
  --krome-error: #EF4444;
  --krome-info: #3B82F6;

  /* Neutral scale (Slate) */
  --krome-gray-50: #F8FAFC;
  --krome-gray-100: #F1F5F9;
  --krome-gray-200: #E2E8F0;
  --krome-gray-300: #CBD5E1;
  --krome-gray-400: #94A3B8;
  --krome-gray-500: #64748B;
  --krome-gray-600: #475569;
  --krome-gray-700: #334155;
  --krome-gray-800: #1E293B;
  --krome-gray-900: #0F172A;
  --krome-gray-950: #020617;

  /* Surfaces */
  --krome-bg: #F8FAFC;
  --krome-surface: #FFFFFF;
  --krome-border: #E2E8F0;
  --krome-text-primary: #0F172A;
  --krome-text-secondary: #475569;
  --krome-text-tertiary: #94A3B8;

  /* Shadows (subtle, Tailwind-style) */
  --krome-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --krome-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --krome-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --krome-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Radius */
  --krome-radius-sm: 6px;
  --krome-radius-md: 8px;
  --krome-radius-lg: 12px;

  /* Typography */
  --krome-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Transitions */
  --krome-transition-fast: 150ms ease;

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 68px;
  --sidebar-bg: #1E1B4B;
  --sidebar-text: #C7D2FE;
  --sidebar-text-hover: #FFFFFF;
  --sidebar-active-bg: rgba(99, 102, 241, 0.25);
  --sidebar-group-text: #818CF8;
  --sidebar-divider: rgba(99, 102, 241, 0.15);
}