/* HealthTriage Design System — Colors, Spacing, Radii, Type tokens
 * Source of truth: ported from docs/mock_v1.html (mock_template.html lines 70..191).
 * Defaults to dark theme. Add `.light` class on a parent to switch to light theme.
 */

:root {
  /* ---- Type tokens ---- */
  --ht-font-sans: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ht-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Brand palette (theme-agnostic anchors) ---- */
  --ht-dark-cerulean: #00203e;
  --ht-cerulean: #009fe3;
  --ht-coral: #ea516d;
  --ht-ghost-white: #f9fbff;
  --ht-alice-blue: #ebf3fe;
  --ht-breast-blue: #6ca9d6;
  --ht-prostate-teal: #5baf9f;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---- Radii ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ---- Layout ---- */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
  --header-height: 56px;

  /* ---- Layering / z-index ---- */
  --z-modal: 1000;
  --z-popover: 900;
  --z-tooltip: 800;
  --z-toast: 1100;
  --z-loading-bar: 1200;
}

:root,
.dark {
  /* Mock-aligned dark palette (neutral grays, no blue tint).
   * Sourced from /tmp/mock_template.html:
   *   --bg #0a0d12, --bg-1 #0f131a, --bg-2 #161b24, --bg-3 #1d2330, --bg-4 #2a3344
   *   --fg #f4f7fb, --fg-2 #aab6c5, --fg-3 #6f7d8e
   *   --line #1e2532, --line-strong #2a3344
   *   --magenta #ff5a7d, --ok #5fdba7, --warn #ffb648, --err #ff5a7d-variant */
  --surface-bg: #0a0d12;
  --surface-card: #0f131a;
  --surface-elevated: #161b24;
  --border-default: #1e2532;
  --border-subtle: #14181f;
  --text-primary: #f4f7fb;
  --text-secondary: #aab6c5;
  --text-muted: #6f7d8e;
  --brand-primary: #009fe3;
  --brand-primary-soft: rgba(0, 159, 227, 0.1);
  --brand-accent: #ff5a7d;
  --brand-accent-soft: rgba(255, 90, 125, 0.14);
  --status-clear: #5fdba7;
  --status-clear-soft: rgba(95, 219, 167, 0.12);
  --status-warning: #ffb648;
  --status-warning-soft: rgba(255, 182, 72, 0.12);
  --status-danger: #ff5a7d;
  --status-danger-soft: rgba(255, 90, 125, 0.12);
  --status-neutral: #aab6c5;
  --status-neutral-soft: rgba(170, 182, 197, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
}

.light {
  --surface-bg: #f9fbff;
  --surface-card: #ffffff;
  --surface-elevated: #ffffff;
  --border-default: #d0dfee;
  --border-subtle: #ebf3fe;
  --text-primary: #00203e;
  --text-secondary: #4a6580;
  --text-muted: #6d8ba8;
  --brand-primary: #009fe3;
  --brand-primary-soft: rgba(0, 159, 227, 0.1);
  --brand-accent: #ea516d;
  --brand-accent-soft: rgba(234, 81, 109, 0.1);
  --status-clear: #15803d;
  --status-clear-soft: rgba(21, 128, 61, 0.1);
  --status-warning: #d97706;
  --status-warning-soft: rgba(217, 119, 6, 0.1);
  --status-danger: #dc2626;
  --status-danger-soft: rgba(220, 38, 38, 0.1);
  --status-neutral: #a7b4c5;
  --status-neutral-soft: rgba(167, 180, 197, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}