/* ================================================================= */
/* 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;

  /* ── KromeCB Client Portal Tokens ── */
  --cb-accent: var(--krome-primary);
  --cb-accent-hover: var(--krome-primary-hover);
  --cb-accent-light: var(--krome-primary-light);
  --cb-accent-rgb: 79, 70, 229;

  --cb-radius-xl: 16px;
  --cb-radius-2xl: 20px;

  --cb-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --cb-shadow-card-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --cb-shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.06);

  --cb-transition-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --cb-transition-smooth: 200ms ease;

  --cb-spacing-page: 24px;
  --cb-spacing-section: 20px;
}

[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);

  --cb-accent-rgb: 129, 140, 248;
  --cb-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --cb-shadow-card-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --cb-shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 8px -4px rgba(0, 0, 0, 0.3);
}