/* HIS Design System Bridge
   Maps his-tokens.css naming onto PactaHealth app token values.
   Load AFTER design-system.css, BEFORE components.css.
   No raw his-tokens.css import needed — zero conflict with existing CSS. */

:root {
  /* Brand scale — map to app's primary teal */
  --his-50:  var(--primary-50);
  --his-100: var(--primary-100);
  --his-200: var(--primary-200);
  --his-300: var(--primary-300);
  --his-400: var(--primary-400);
  --his-500: var(--primary-500);
  --his-600: var(--primary-600);
  --his-700: var(--primary-700);
  --his-800: var(--primary-800);
  --his-900: var(--primary-900);

  /* Status palette — map to app's semantic colors */
  --critical-50:  var(--error-100);
  --critical-500: var(--error-500);
  --critical-600: var(--error-700);
  --urgent-50:    var(--warning-100);
  --urgent-500:   var(--warning-500);
  --urgent-600:   var(--warning-700);
  --success-50:   var(--success-100);
  --success-600:  var(--success-700);
  --info-50:      var(--info-100);
  --info-600:     var(--info-700);

  /* Spacing */
  --sp-1:  var(--space-1);
  --sp-2:  var(--space-2);
  --sp-3:  var(--space-3);
  --sp-4:  var(--space-4);
  --sp-5:  var(--space-5);
  --sp-6:  var(--space-6);
  --sp-8:  var(--space-8);
  --sp-10: var(--space-10);

  /* Radius */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   var(--radius-xl);
  --r-pill: var(--radius-pill);

  /* Shadows */
  --sh-xs: var(--shadow-sm);
  --sh-sm: var(--shadow-sm);
  --sh-md: var(--shadow-md);
  --sh-lg: var(--shadow-lg);

  /* Shell dimensions (use app's wider sidebar) */
  --sidebar-w:      var(--sidebar-width);
  --sidebar-rail-w: var(--sidebar-width-compact);
  --topbar-h:       var(--header-height);
}

/* Light theme surface & semantic tokens */
:root, [data-theme="light"] {
  --bg-canvas:  var(--bg-secondary);
  --bg-surface: var(--bg-primary);
  --bg-raised:  var(--surface-raised);
  --bg-overlay: var(--bg-primary);
  --bg-sidebar: var(--primary-900);
  --bg-topbar:  var(--bg-primary);

  --border:       var(--border-light);
  --border-muted: var(--border-light);

  --text-muted:       var(--text-tertiary);
  --text-placeholder: var(--text-tertiary);
  --text-on-brand:    var(--text-inverse);

  /* Status semantic tokens */
  --status-critical-bg: var(--color-error-light);
  --status-critical-fg: var(--color-error-dark);
  --status-urgent-bg:   var(--color-warning-light);
  --status-urgent-fg:   var(--color-warning-dark);
  --status-success-bg:  var(--color-success-light);
  --status-success-fg:  var(--color-success-dark);
  --status-info-bg:     var(--color-info-light);
  --status-info-fg:     var(--color-info-dark);

  /* Queue / appointment badge tokens */
  --badge-waiting-bg: var(--color-warning-light);
  --badge-waiting-fg: var(--color-warning-dark);
  --badge-consult-bg: var(--primary-50);
  --badge-consult-fg: var(--primary-700);
  --badge-done-bg:    var(--color-success-light);
  --badge-done-fg:    var(--color-success-dark);
}

[data-theme="dark"] {
  --bg-canvas:  var(--bg-secondary);
  --bg-surface: var(--bg-primary);
  --bg-raised:  var(--surface-raised);
  --bg-overlay: var(--surface-strong);
  --bg-sidebar: var(--bg-shell);
  --bg-topbar:  var(--surface-strong);

  --border:       var(--border-light);
  --border-muted: var(--border-light);

  --text-muted:       var(--text-tertiary);
  --text-placeholder: var(--text-tertiary);
  --text-on-brand:    var(--neutral-50);

  --status-critical-bg: var(--color-error-light);
  --status-critical-fg: var(--color-error-dark);
  --status-urgent-bg:   var(--color-warning-light);
  --status-urgent-fg:   var(--color-warning-dark);
  --status-success-bg:  var(--color-success-light);
  --status-success-fg:  var(--color-success-dark);
  --status-info-bg:     var(--color-info-light);
  --status-info-fg:     var(--color-info-dark);

  --badge-waiting-bg: var(--color-warning-light);
  --badge-waiting-fg: var(--color-warning-dark);
  --badge-consult-bg: rgba(16, 185, 129, 0.15);
  --badge-consult-fg: #34d399;
  --badge-done-bg:    var(--color-success-light);
  --badge-done-fg:    var(--color-success-dark);
}