/**
 * @kbx Design Tokens — v60
 * Color, spacing, typography, density
 */

:root {
  /* Colors */
  --kbx-color-primary: #3b82f6;
  --kbx-color-success: #10b981;
  --kbx-color-warning: #f59e0b;
  --kbx-color-danger: #ef4444;
  --kbx-color-info: #06b6d4;

  /* Base Colors */
  --kbx-color-surface: #ffffff;
  --kbx-color-background: #f9fafb;
  --kbx-color-border: #e5e7eb;
  --kbx-color-text: #000000;
  --kbx-color-text-muted: #6b7280;
  --kbx-color-section-heading: #f9fafb;

  /* Module Colors */
  --kbx-color-module-accent: #3b82f6;
  --kbx-module-oms: #3b82f6;
  --kbx-module-erp: #a78bfa;
  --kbx-module-wms: #14b8a6;
  --kbx-module-common: #6b7280;

  /* Light Tones (for backgrounds) */
  --kbx-color-danger-light: #fee2e2;
  --kbx-color-warning-light: #fef3c7;
  --kbx-color-success-light: #dcfce7;
  --kbx-color-info-light: #cffafe;

  /* Spacing */
  --kbx-space-1: 4px;
  --kbx-space-2: 8px;
  --kbx-space-3: 12px;
  --kbx-space-4: 16px;
  --kbx-space-5: 20px;
  --kbx-space-6: 24px;

  /* Typography */
  --kbx-font-family: system-ui, -apple-system, sans-serif;
  --kbx-font-xs: 12px;
  --kbx-font-sm: 13px;
  --kbx-font-base: 14px;
  --kbx-font-lg: 16px;
  --kbx-font-xl: 18px;
  --kbx-font-2xl: 20px;

  /* Line Heights */
  --kbx-line-height-tight: 1.4;
  --kbx-line-height-normal: 1.5;
  --kbx-line-height-relaxed: 1.6;

  /* Component Heights (compact density) */
  --kbx-control-xs: 28px;
  --kbx-control-sm: 32px;
  --kbx-control-md: 36px;
  --kbx-control-lg: 44px;

  /* Grid Row Height */
  --kbx-grid-row-height: 34px;
  --kbx-grid-header-height: 36px;

  /* Master/Detail Grid */
  --kbx-master-list-min-width: 280px;
  --kbx-master-list-compact-width: 32%;

  /* Borders */
  --kbx-border-width: 1px;
  --kbx-border-radius: 4px;

  /* Shadows */
  --kbx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --kbx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --kbx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --kbx-shadow-shell: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

  /* Transitions */
  --kbx-transition-fast: 0.15s ease;
  --kbx-transition-base: 0.2s ease;
  --kbx-transition-slow: 0.3s ease;

  /* Density: compact (default) */
  --kbx-density: compact;
  --kbx-input-height: 34px;
  --kbx-input-padding: 8px 12px;
  --kbx-touch-target: 44px;
  --kbx-font-size: 14px;
}

/* Comfortable Density */
:root[data-density="comfortable"] {
  --kbx-input-height: 36px;
  --kbx-input-padding: 10px 12px;
  --kbx-control-md: 40px;
  --kbx-grid-row-height: 36px;
  --kbx-touch-target: 48px;
  --kbx-font-size: 14px;
}

/* Touch Density (WMS/Mobile) */
:root[data-density="touch"] {
  --kbx-input-height: 48px;
  --kbx-input-padding: 12px 16px;
  --kbx-control-md: 52px;
  --kbx-grid-row-height: 48px;
  --kbx-touch-target: 52px;
  --kbx-font-size: 16px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --kbx-color-surface: #1f2937;
    --kbx-color-background: #111827;
    --kbx-color-border: #374151;
    --kbx-color-text: #f9fafb;
    --kbx-color-text-muted: #d1d5db;
    --kbx-color-section-heading: #111827;

    --kbx-color-danger-light: #7f1d1d;
    --kbx-color-warning-light: #92400e;
    --kbx-color-success-light: #15803d;
    --kbx-color-info-light: #0c4a6e;
  }
}

/* Explicit Dark Theme Override */
:root[data-theme="dark"] {
  --kbx-color-surface: #1f2937;
  --kbx-color-background: #111827;
  --kbx-color-border: #374151;
  --kbx-color-text: #f9fafb;
  --kbx-color-text-muted: #d1d5db;
  --kbx-color-section-heading: #111827;

  --kbx-color-danger-light: #7f1d1d;
  --kbx-color-warning-light: #92400e;
  --kbx-color-success-light: #15803d;
  --kbx-color-info-light: #0c4a6e;
}

/* Light Theme Override */
:root[data-theme="light"] {
  --kbx-color-surface: #ffffff;
  --kbx-color-background: #f9fafb;
  --kbx-color-border: #e5e7eb;
  --kbx-color-text: #000000;
  --kbx-color-text-muted: #6b7280;
  --kbx-color-section-heading: #f9fafb;

  --kbx-color-danger-light: #fee2e2;
  --kbx-color-warning-light: #fef3c7;
  --kbx-color-success-light: #dcfce7;
  --kbx-color-info-light: #cffafe;
}

/* Global Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--kbx-font-family);
  font-size: var(--kbx-font-size);
  line-height: var(--kbx-line-height-normal);
  color: var(--kbx-color-text);
  background: var(--kbx-color-background);
  transition: color var(--kbx-transition-fast), background var(--kbx-transition-fast);
}

/* Focus Visible (Accessibility) */
:focus-visible {
  outline: 2px solid var(--kbx-color-primary);
  outline-offset: 2px;
}

/* Forced Colors Mode (High Contrast) */
@media (forced-colors: active) {
  :root {
    --kbx-color-primary: CanvasText;
    --kbx-color-text: CanvasText;
    --kbx-color-border: CanvasText;
  }

  button {
    border: 1px solid CanvasText;
  }
}