/**
 * KeluargaMart Unified Design System Tokens
 * Canonical design tokens across apps/erp, apps/pos, and apps/b2b.
 */

:root {
  /* Brand Palette */
  --km-color-primary-50: #f5f8ff;
  --km-color-primary-100: #dce7fc;
  --km-color-primary-200: #c4d4f5;
  --km-color-primary-300: #93b4ec;
  --km-color-primary-400: #578ee1;
  --km-color-primary-500: #142b80;
  --km-color-primary-600: #102268;
  --km-color-primary-700: #0d1b54;
  --km-color-primary-800: #0a143f;
  --km-color-primary-900: #070e2c;

  /* Ink / Text Neutrals */
  --km-color-ink: #14213d;
  --km-color-ink-muted: #475569;
  --km-color-ink-faint: #64748b;
  --km-color-ink-disabled: #94a3b8;

  /* Surface / Canvas */
  --km-color-canvas: #f5f8ff;
  --km-color-surface: #ffffff;
  --km-color-surface-muted: #f8fafc;
  --km-color-surface-accent: #eef3fa;

  /* Borders */
  --km-color-border: #d9e2f0;
  --km-color-border-strong: #cbd5e1;

  /* Status Tokens */
  --km-color-success: #059669;
  --km-color-success-soft: #ecfdf5;
  --km-color-success-border: #a7f3d0;

  --km-color-warning: #d97706;
  --km-color-warning-soft: #fffbeb;
  --km-color-warning-border: #fde68a;

  --km-color-danger: #dc2626;
  --km-color-danger-soft: #fef2f2;
  --km-color-danger-border: #fecaca;

  --km-color-info: #2563eb;
  --km-color-info-soft: #eff6ff;
  --km-color-info-border: #bfdbfe;

  /* Typography */
  --km-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --km-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Border Radii */
  --km-radius-xs: 4px;
  --km-radius-sm: 6px;
  --km-radius-md: 8px;
  --km-radius-lg: 12px;
  --km-radius-xl: 16px;
  --km-radius-2xl: 20px;
  --km-radius-full: 9999px;

  /* Shadows */
  --km-shadow-card: 0 1px 3px 0 rgba(20, 33, 61, 0.05), 0 1px 2px -1px rgba(20, 33, 61, 0.05);
  --km-shadow-modal: 0 20px 25px -5px rgba(20, 33, 61, 0.1), 0 8px 10px -6px rgba(20, 33, 61, 0.1);
  --km-shadow-dropdown: 0 10px 15px -3px rgba(20, 33, 61, 0.08), 0 4px 6px -4px rgba(20, 33, 61, 0.04);
}