/*
 * Clinicbot design tokens.
 *
 * Single source of truth for color, radius, spacing, shadow, and motion.
 * Theme swaps via [data-bs-theme="dark"] on <html>.
 *
 * Bootstrap 5.3 --bs-* variables are remapped here so every Bootstrap
 * component inherits the theme without per-component overrides.
 *
 * Both themes use zinc neutrals + a single emerald accent. Never pure
 * #000 / #fff anywhere.
 */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand neutrals (zinc scale) --- */
  --cb-zinc-50:  #fafafa;
  --cb-zinc-100: #f4f4f5;
  --cb-zinc-200: #e4e4e7;
  --cb-zinc-300: #d4d4d8;
  --cb-zinc-400: #a1a1aa;
  --cb-zinc-500: #71717a;
  --cb-zinc-600: #52525b;
  --cb-zinc-700: #3f3f46;
  --cb-zinc-800: #27272a;
  --cb-zinc-900: #18181b;
  --cb-zinc-950: #09090b;

  /* --- Accent (emerald) + semantic colors --- */
  --cb-emerald-50:  #ecfdf5;
  --cb-emerald-100: #d1fae5;
  --cb-emerald-200: #a7f3d0;
  --cb-emerald-500: #10b981;
  --cb-emerald-600: #059669;
  --cb-amber-50:    #fffbeb;
  --cb-amber-200:   #fde68a;
  --cb-amber-500:   #f59e0b;
  --cb-amber-600:   #d97706;
  --cb-red-50:      #fef2f2;
  --cb-red-200:     #fecaca;
  --cb-red-500:     #ef4444;
  --cb-red-600:     #dc2626;
  --cb-blue-50:     #eff6ff;
  --cb-blue-200:    #bfdbfe;
  --cb-blue-500:    #3b82f6;
  --cb-blue-600:    #2563eb;

  /* --- Surfaces (light defaults) --- */
  --cb-bg:           var(--cb-zinc-50);
  --cb-surface:      #ffffff;
  --cb-surface-2:    var(--cb-zinc-100);
  --cb-border:       var(--cb-zinc-200);
  --cb-border-strong:var(--cb-zinc-300);
  --cb-text:         var(--cb-zinc-900);
  --cb-text-muted:   var(--cb-zinc-500);
  --cb-text-subtle:  var(--cb-zinc-600);
  --cb-text-on-primary: #ffffff;

  /* --- Brand primary: zinc-950 (light) / zinc-50 (dark) --- */
  --cb-primary:      var(--cb-zinc-950);
  --cb-primary-hover:var(--cb-zinc-800);
  --cb-primary-fg:   #ffffff;

  /* --- Semantic (theme-aware) --- */
  --cb-success:      var(--cb-emerald-600);
  --cb-success-soft: var(--cb-emerald-50);
  --cb-success-fg:   var(--cb-emerald-600);
  --cb-warning:      var(--cb-amber-600);
  --cb-warning-soft: var(--cb-amber-50);
  --cb-warning-fg:   var(--cb-amber-600);
  --cb-danger:       var(--cb-red-600);
  --cb-danger-soft:  var(--cb-red-50);
  --cb-danger-fg:    var(--cb-red-600);
  --cb-info:         var(--cb-blue-600);
  --cb-info-soft:    var(--cb-blue-50);
  --cb-info-fg:      var(--cb-blue-600);

  /* --- Shape --- */
  --cb-radius-base: 10px;
  --cb-radius-sm:   6px;
  --cb-radius-pill: 999px;

  /* --- Spacing --- */
  --cb-page-pad: 24px;
  --cb-page-pad-lg: 32px;
  --cb-card-pad: 20px;
  --cb-card-pad-lg: 24px;
  --cb-cell-py: 12px;
  --cb-cell-px: 16px;

  /* --- Type --- */
  --cb-font-sans: 'Geist', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cb-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* --- Elevation (tinted zinc, low alpha) --- */
  --cb-shadow-xs: 0 1px 1px 0 rgb(24 24 27 / 0.04);
  --cb-shadow-sm: 0 1px 2px 0 rgb(24 24 27 / 0.06), 0 1px 1px 0 rgb(24 24 27 / 0.04);
  --cb-shadow-md: 0 4px 8px -2px rgb(24 24 27 / 0.08), 0 2px 4px -2px rgb(24 24 27 / 0.04);
  --cb-shadow-lg: 0 12px 24px -8px rgb(24 24 27 / 0.12), 0 4px 8px -4px rgb(24 24 27 / 0.06);

  /* --- Motion --- */
  --cb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cb-dur-micro:  120ms;
  --cb-dur-state:  180ms;
  --cb-dur-overlay: 240ms;

  /* --- Bootstrap variable remap (light) --- */
  --bs-body-bg: var(--cb-bg);
  --bs-body-color: var(--cb-text);
  --bs-body-font-family: var(--cb-font-sans);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.55;
  --bs-border-color: var(--cb-border);
  --bs-border-color-translucent: var(--cb-border);

  --bs-primary: var(--cb-primary);
  --bs-primary-rgb: 9, 9, 11;        /* zinc-950 */
  --bs-primary-bg-subtle: var(--cb-surface-2);
  --bs-primary-text-emphasis: var(--cb-text);

  --bs-secondary: var(--cb-zinc-600);
  --bs-secondary-rgb: 82, 82, 91;
  --bs-secondary-bg-subtle: var(--cb-surface-2);

  --bs-success: var(--cb-success);
  --bs-success-rgb: 5, 150, 105;
  --bs-success-bg-subtle: var(--cb-success-soft);
  --bs-warning: var(--cb-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-bg-subtle: var(--cb-warning-soft);
  --bs-danger: var(--cb-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-bg-subtle: var(--cb-danger-soft);
  --bs-info: var(--cb-info);
  --bs-info-rgb: 37, 99, 235;
  --bs-info-bg-subtle: var(--cb-info-soft);

  --bs-link-color: var(--cb-text);
  --bs-link-hover-color: var(--cb-zinc-700);

  --bs-border-radius:    var(--cb-radius-base);
  --bs-border-radius-sm: var(--cb-radius-sm);
  --bs-border-radius-lg: var(--cb-radius-base);
  --bs-border-radius-xl: 14px;

  --bs-emphasis-color: var(--cb-text);
  --bs-secondary-color: var(--cb-text-muted);
  --bs-tertiary-color:  var(--cb-text-subtle);
  --bs-tertiary-bg:     var(--cb-surface-2);
  --bs-secondary-bg:    var(--cb-surface-2);
}

/* ===== Dark theme ===== */
[data-bs-theme="dark"] {
  --cb-bg:           var(--cb-zinc-950);
  --cb-surface:      var(--cb-zinc-900);
  --cb-surface-2:    var(--cb-zinc-800);
  --cb-border:       var(--cb-zinc-800);
  --cb-border-strong:var(--cb-zinc-700);
  --cb-text:         var(--cb-zinc-50);
  --cb-text-muted:   var(--cb-zinc-400);
  --cb-text-subtle:  var(--cb-zinc-300);
  --cb-text-on-primary: #ffffff;

  --cb-primary:      var(--cb-zinc-50);
  --cb-primary-hover:var(--cb-zinc-200);
  --cb-primary-fg:   var(--cb-zinc-950);

  --cb-success-soft: rgba(16, 185, 129, 0.16);
  --cb-warning-soft: rgba(245, 158, 11, 0.16);
  --cb-danger-soft:  rgba(239, 68, 68, 0.16);
  --cb-info-soft:    rgba(59, 130, 246, 0.16);

  --cb-shadow-xs: 0 1px 1px 0 rgb(0 0 0 / 0.30);
  --cb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --cb-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.45);
  --cb-shadow-lg: 0 12px 24px -8px rgb(0 0 0 / 0.55);

  /* Bootstrap remap (dark) */
  --bs-body-bg: var(--cb-bg);
  --bs-body-color: var(--cb-text);
  --bs-border-color: var(--cb-border);
  --bs-border-color-translucent: var(--cb-border);

  --bs-primary: var(--cb-primary);
  --bs-primary-rgb: 250, 250, 250;
  --bs-primary-bg-subtle: var(--cb-surface-2);
  --bs-primary-text-emphasis: var(--cb-text);

  --bs-secondary: var(--cb-zinc-400);
  --bs-secondary-rgb: 161, 161, 170;

  --bs-success: var(--cb-emerald-500);
  --bs-success-rgb: 16, 185, 129;
  --bs-warning: var(--cb-amber-500);
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger:  var(--cb-red-500);
  --bs-danger-rgb: 239, 68, 68;
  --bs-info:    var(--cb-blue-500);
  --bs-info-rgb: 59, 130, 246;

  --bs-link-color: var(--cb-text);
  --bs-link-hover-color: var(--cb-zinc-200);

  --bs-emphasis-color: var(--cb-text);
  --bs-secondary-color: var(--cb-text-muted);
  --bs-tertiary-color:  var(--cb-text-subtle);
  --bs-tertiary-bg:     var(--cb-surface-2);
  --bs-secondary-bg:    var(--cb-surface-2);
}