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

:root {
  /* Brand */
  --krome-primary: #4F46E5;
  --krome-primary-hover: #4338CA;
  --krome-primary-light: #EEF2FF;
  --krome-secondary: #0EA5E9;
  --krome-secondary-hover: #0284C7;

  /* 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 (always dark) */
  --krome-sidebar-bg: #0F172A;
  --krome-sidebar-text: rgba(255, 255, 255, 0.7);
  --krome-sidebar-accent: #4F46E5;
}

[data-theme="dark"] {
  --krome-primary: #818CF8;
  --krome-primary-hover: #6366F1;
  --krome-primary-light: #1E1B4B;
  --krome-secondary: #38BDF8;
  --krome-secondary-hover: #0EA5E9;

  --krome-success: #34D399;
  --krome-warning: #FBBF24;
  --krome-error: #F87171;
  --krome-info: #60A5FA;

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

  --krome-bg: #0F172A;
  --krome-surface: #1E293B;
  --krome-border: #334155;
  --krome-text-primary: #F1F5F9;
  --krome-text-secondary: #94A3B8;
  --krome-text-tertiary: #64748B;

  --krome-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --krome-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --krome-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --krome-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* ================================================================= */
/* MudBlazor Elevation Overrides — replace heavy Material shadows    */
/* ================================================================= */

.mud-elevation-0 { box-shadow: none !important; }
.mud-elevation-1 { box-shadow: var(--krome-shadow-xs) !important; }
.mud-elevation-2 { box-shadow: var(--krome-shadow-xs) !important; }
.mud-elevation-3 { box-shadow: var(--krome-shadow-sm) !important; }
.mud-elevation-4 { box-shadow: var(--krome-shadow-sm) !important; }
.mud-elevation-5 { box-shadow: var(--krome-shadow-sm) !important; }
.mud-elevation-6 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-7 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-8 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-9 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-10 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-11 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-12 { box-shadow: var(--krome-shadow-md) !important; }
.mud-elevation-13 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-14 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-15 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-16 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-17 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-18 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-19 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-20 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-21 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-22 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-23 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-24 { box-shadow: var(--krome-shadow-lg) !important; }
.mud-elevation-25 { box-shadow: var(--krome-shadow-lg) !important; }