/* MedX design tokens v4 "Calm"
   Steel-blue palette sampled from pics/color reference.jpg (#72a6bb, #a7c8d7, #eaf2f5).
   Light is the default everywhere (even when the OS is dark, even with JS off).
   Dark applies only with <html data-theme="dark">, set from the user menu.
   Contrast (WCAG 2.2): primary #3a7891 on white 4.9:1, links #2c5f74 7.0:1,
   text-3 #5d6c73 5.4:1, input border #7b94a0 3.2:1. #72a6bb is decoration only (2.7:1). */
:root {
  /* Steel-blue scale */
  --blue-50: #f3f7f9;
  --blue-100: #e3eef3;
  --blue-200: #c9dee7;
  --blue-300: #a7c8d7;
  --blue-400: #72a6bb;
  --blue-500: #5690a7;
  --blue-600: #3a7891;
  --blue-700: #2c5f74;
  --blue-800: #1f4656;
  --blue-900: #14303b;

  /* Brand (names kept from v2/v3 so every page keeps working) */
  --c-primary: var(--blue-600);
  --c-primary-600: var(--blue-700);
  --c-primary-700: var(--blue-700);
  --c-primary-50: var(--blue-100);
  --c-primary-100: var(--blue-200);
  --c-primary-glow: transparent;
  --c-brand: var(--blue-400);
  --brand-mark: #3a7891;   /* logo tile: same in both themes */
  --c-link: var(--blue-700);
  --c-accent: var(--blue-700);
  --c-accent-50: var(--blue-100);
  --c-violet: #6941c6;

  /* Gradients are retired: flat colours only */
  --g-brand: var(--blue-600);
  --g-brand-soft: var(--blue-100);
  --g-sunrise: var(--c-warning);
  --g-mint: var(--c-success);
  --g-violet: var(--c-purple);
  --g-rose: var(--c-danger);
  --g-sky: var(--blue-500);

  /* Neutrals (blue-grey) */
  --c-bg: #eef3f6;
  --c-surface: #ffffff;
  --c-surface-2: #f6f9fb;
  --c-surface-3: #edf2f5;
  --c-surface-glass: #ffffff;
  --c-border: #dce6ea;
  --c-border-strong: #c3d2d9;
  --c-input-border: #7b94a0;
  --c-text: #0f1d24;
  --c-text-2: #3d4f58;
  --c-text-3: #5d6c73;
  --c-text-inverse: #ffffff;
  --c-on-primary: #ffffff;
  --c-on-danger: #ffffff;

  /* Semantic (status only) */
  --c-success: #1f7a55;
  --c-success-bg: #e4f4ec;
  --c-warning: #9a5b00;
  --c-warning-bg: #fdf0d9;
  --c-danger: #b42318;
  --c-danger-bg: #fde8e7;
  --c-info: var(--blue-700);
  --c-info-bg: var(--blue-100);
  --c-purple: #6941c6;
  --c-purple-bg: #f0ebfb;

  /* Status map: one meaning per colour, used by every badge, pill and banner */
  --st-ok: var(--c-success);      --st-ok-bg: var(--c-success-bg);
  --st-warn: var(--c-warning);    --st-warn-bg: var(--c-warning-bg);
  --st-crit: var(--c-danger);     --st-crit-bg: var(--c-danger-bg);
  --st-info: var(--c-info);       --st-info-bg: var(--c-info-bg);
  --st-pending: var(--c-purple);  --st-pending-bg: var(--c-purple-bg);
  --st-done: var(--c-text-3);     --st-done-bg: var(--c-surface-3);

  /* Sidebar (light, same as surfaces) */
  --c-side-bg: var(--c-surface);
  --c-side-bg-2: var(--c-surface);
  --c-side-text: var(--c-text-2);
  --c-side-text-active: var(--blue-800);
  --c-side-hover: var(--c-surface-3);
  --c-side-active: var(--blue-100);

  --bg-ambient: none;

  /* Type: one highly legible family (Braille Institute, 2025).
     I/l/1, O/0 and B/8 are distinct by default, which matters for MRNs, doses and lab values. */
  --font-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --fs-xs: 13px;      /* minimum anywhere */
  --fs-sm: 13.5px;    /* metadata */
  --fs-base: 16px;    /* body, forms, buttons */
  --fs-md: 15px;      /* tables, clinical values */
  --fs-lg: 17px;      /* h3 */
  --fs-xl: 21px;      /* h2 */
  --fs-2xl: 28px;     /* h1 */
  --fs-3xl: 34px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Shape & elevation (almost flat) */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 48, 59, .04);
  --shadow-md: 0 4px 14px -6px rgba(20, 48, 59, .14);
  --shadow-lg: 0 20px 50px -16px rgba(20, 48, 59, .28);
  --shadow-glow: none;
  --focus: 0 0 0 3px rgba(58, 120, 145, .35);

  /* Motion: short and functional only */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: var(--ease);
  --t-fast: .12s;
  --t-med: .2s;
  --t-slow: .3s;

  /* Skeleton */
  --skel-base: #e6edf1;
  --skel-shine: rgba(255, 255, 255, .7);

  --sidebar-w: 256px;
  --topbar-h: 64px;
  color-scheme: light;
}

/* ---------- Dark theme: only when chosen in the user menu ---------- */
:root[data-theme="dark"] {
  --blue-50: #13222a;
  --blue-100: #1b3039;
  --blue-200: #24414d;
  --blue-300: #3b6373;
  --blue-400: #5f97ad;
  --blue-500: #7fb6cb;
  --blue-600: #7fb6cb;
  --blue-700: #9cc6d6;
  --blue-800: #c4e0ea;
  --blue-900: #e3f0f5;
  --c-bg: #0c1519;
  --c-surface: #16232a;
  --c-surface-2: #192930;
  --c-surface-3: #1f3139;
  --c-surface-glass: #16232a;
  --c-border: #2a3d46;
  --c-border-strong: #3a515b;
  --c-input-border: #6d8792;
  --c-text: #e6eef1;
  --c-text-2: #b8c8cf;
  --c-text-3: #9ab0b9;
  --c-on-primary: #0c1519;
  --c-on-danger: #2a0b08;
  --c-success: #5fd3a0;
  --c-success-bg: rgba(95, 211, 160, .13);
  --c-warning: #f2c063;
  --c-warning-bg: rgba(242, 192, 99, .13);
  --c-danger: #ff8a80;
  --c-danger-bg: rgba(255, 138, 128, .14);
  --c-purple: #c1a8ff;
  --c-purple-bg: rgba(193, 168, 255, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px -14px rgba(0, 0, 0, .65);
  --focus: 0 0 0 3px rgba(127, 182, 203, .4);
  --skel-base: #1f3139;
  --skel-shine: rgba(255, 255, 255, .06);
  color-scheme: dark;
}