/**
 * KlientHub Design System Tokens
 *
 * Defines colors, typography, spacing, border radii, shadows, and dark mode
 * palettes for the KlientHub Dental Patient Marketplace.
 *
 * @author    Unimke Abana <https://brandloci.com>
 * @copyright 2026 KlientHub / BrandLoci
 * @link      https://brandloci.com
 */

:root {
  /* Brand Colors */
  --kh-primary: #0052cc;
  --kh-primary-hover: #0043a6;
  --kh-primary-light: #eff6ff;
  --kh-primary-border: #bfdbfe;
  --kh-accent: #0d9488;
  --kh-accent-hover: #0f766e;
  --kh-accent-light: #f0fdfa;

  /* Semantic Status Colors */
  --kh-success: #10b981;
  --kh-success-bg: #ecfdf5;
  --kh-success-text: #065f46;

  --kh-warning: #f59e0b;
  --kh-warning-bg: #fffbeb;
  --kh-warning-text: #92400e;

  --kh-danger: #ef4444;
  --kh-danger-bg: #fef2f2;
  --kh-danger-text: #991b1b;

  /* Neutrals & Surfaces (Clinical Light Mode Default) */
  --kh-bg-main: #f8fafc;
  --kh-surface: #ffffff;
  --kh-surface-alt: #f1f5f9;
  --kh-border: #e2e8f0;
  --kh-border-focus: #93c5fd;

  /* Typography */
  --kh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --kh-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --kh-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --kh-text-main: #0f172a;
  --kh-text-secondary: #334155;
  --kh-text-muted: #64748b;

  /* Radii & Elevations */
  --kh-radius-xs: 6px;
  --kh-radius-sm: 8px;
  --kh-radius-md: 12px;
  --kh-radius-lg: 16px;
  --kh-radius-full: 9999px;

  --kh-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --kh-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --kh-shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);

  /* Component Specific */
  --kh-card-bg: #ffffff;
  --kh-input-bg: #ffffff;
  --kh-modal-backdrop: rgba(15, 23, 42, 0.6);
  --kh-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Executive Dark Mode Overrides */
[data-kh-theme="dark"],
body.kh-dark-mode {
  --kh-primary: #3b82f6;
  --kh-primary-hover: #60a5fa;
  --kh-primary-light: rgba(59, 130, 246, 0.16);
  --kh-primary-border: rgba(59, 130, 246, 0.35);
  --kh-accent: #14b8a6;
  --kh-accent-light: rgba(20, 184, 166, 0.15);

  --kh-bg-main: #0b1120;
  --kh-surface: #1e293b;
  --kh-surface-alt: #0f172a;
  --kh-border: #334155;
  --kh-border-focus: #3b82f6;

  --kh-text-main: #f8fafc;
  --kh-text-secondary: #cbd5e1;
  --kh-text-muted: #94a3b8;

  --kh-card-bg: #1e293b;
  --kh-input-bg: #0f172a;

  --kh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --kh-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
  --kh-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.55);
}