/* ============================================================
   NEFROS — Design tokens.

   Derived from the PEDCAM design system (same scale, same shell, same
   light/dark strategy), re-tinted for medicine: PEDCAM's industrial navy and
   orange give way to a clinical teal with a deep slate ink.

   The one addition is the CLINICAL RISK RAMP: the five colours of the KDIGO
   heat map are tokens, not ad-hoc values, because the same five appear on the
   patient header, the dashboard grid, the trend charts and the printed report,
   and a nephrologist reading green in one place and green in another must be
   reading the same thing.
   ============================================================ */

:root {
  --font-ui:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --bg:            oklch(0.985 0.004 195);
  --surface:       #ffffff;
  --surface-2:     oklch(0.976 0.006 195);
  --surface-3:     oklch(0.958 0.008 195);
  --border:        oklch(0.918 0.008 195);
  --border-strong: oklch(0.865 0.012 195);
  --text:          oklch(0.26 0.028 220);
  --text-2:        oklch(0.505 0.022 220);
  --text-3:        oklch(0.645 0.016 220);

  /* Brand: clinical teal primary, deep slate ink, warm amber accent. */
  --primary:        oklch(0.575 0.108 192);
  --primary-hover:  oklch(0.515 0.108 192);
  --primary-fg:     #ffffff;
  --primary-soft:   oklch(0.955 0.032 192);
  --primary-softer: oklch(0.977 0.016 192);
  --primary-border: oklch(0.872 0.055 192);
  --ink:            oklch(0.325 0.045 225);
  --accent:         oklch(0.705 0.145 48);
  --accent-soft:    oklch(0.958 0.042 55);

  --green:       oklch(0.625 0.145 152);
  --green-soft:  oklch(0.952 0.045 152);
  --amber:       oklch(0.725 0.148 72);
  --amber-soft:  oklch(0.958 0.050 80);
  --red:         oklch(0.585 0.198 25);
  --red-soft:    oklch(0.955 0.040 25);
  --indigo:      oklch(0.552 0.185 285);
  --indigo-soft: oklch(0.958 0.040 285);
  --teal:        oklch(0.605 0.098 195);

  /* ── Clinical risk ramp (KDIGO heat map) ──
     low → moderate → high → very high. `crit` is reserved for a value in the
     critical band of its reference range, which is a louder thing than risk. */
  --risk-low:        oklch(0.640 0.140 150);
  --risk-low-bg:     oklch(0.945 0.055 150);
  --risk-moderate:   oklch(0.760 0.145 88);
  --risk-moderate-bg: oklch(0.955 0.065 88);
  --risk-high:       oklch(0.690 0.165 52);
  --risk-high-bg:    oklch(0.950 0.060 52);
  --risk-very-high:  oklch(0.575 0.195 25);
  --risk-very-high-bg: oklch(0.945 0.048 25);
  --risk-crit:       oklch(0.455 0.185 12);
  --risk-crit-bg:    oklch(0.920 0.060 12);

  /* Lab flags: a value out of range vs. a value that needs a phone call. */
  --flag-high:     var(--red);
  --flag-low:      var(--indigo);
  --flag-critical: var(--risk-crit);

  --radius-lg: 16px;
  --radius:    11px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(15, 32, 39, .04), 0 1px 3px rgba(15, 32, 39, .05);
  --shadow-md: 0 2px 4px -1px rgba(15, 32, 39, .05), 0 8px 20px -6px rgba(15, 32, 39, .10);
  --shadow-lg: 0 8px 16px -6px rgba(15, 32, 39, .08), 0 20px 40px -12px rgba(15, 32, 39, .16);
  --ring:      0 0 0 3px oklch(0.575 0.108 192 / 0.22);

  --fs-2xl:   1.5rem;
  --fs-xl:    1.25rem;
  --fs-lg:    1.125rem;
  --fs-md:    1rem;
  --fs-base:  0.9375rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.8125rem;
  --fs-2xs:   0.75rem;
  --fs-3xs:   0.6875rem;
  --fs-micro: 0.625rem;

  --sidebar-w: 256px;
  /* One height for every control on a row (buttons, inputs, selects, toggles). */
  --control-h:    38px;
  --control-h-sm: 30px;
  --btn-h:        var(--control-h);

  /* Motion. The brief asks for nothing over 200 ms, so the scale tops out there. */
  --t-fast: 120ms;
  --t-base: 160ms;
  --t-slow: 200ms;
  --ease:   cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            oklch(0.145 0.014 220);
  --surface:       oklch(0.185 0.014 220);
  --surface-2:     oklch(0.215 0.013 220);
  --surface-3:     oklch(0.245 0.012 220);
  --border:        oklch(0.315 0.011 220);
  --border-strong: oklch(0.395 0.011 220);
  --text:          oklch(0.945 0.005 200);
  --text-2:        oklch(0.735 0.010 200);
  --text-3:        oklch(0.555 0.010 200);

  --primary:        oklch(0.715 0.105 192);
  --primary-hover:  oklch(0.775 0.105 192);
  --primary-fg:     oklch(0.165 0.020 200);
  --primary-soft:   oklch(0.265 0.048 192);
  --primary-softer: oklch(0.210 0.030 192);
  --primary-border: oklch(0.385 0.065 192);
  --ink:            oklch(0.805 0.045 225);
  --accent:         oklch(0.755 0.135 55);
  --accent-soft:    oklch(0.255 0.058 55);

  --green:       oklch(0.700 0.135 152);
  --green-soft:  oklch(0.235 0.058 152);
  --amber:       oklch(0.790 0.135 78);
  --amber-soft:  oklch(0.250 0.058 78);
  --red:         oklch(0.675 0.175 25);
  --red-soft:    oklch(0.250 0.058 25);
  --indigo:      oklch(0.675 0.160 285);
  --indigo-soft: oklch(0.250 0.058 285);

  /* The ramp keeps its hues but lifts its lightness, so the heat map still
     reads as one gradient on a dark surface instead of five muddy patches. */
  --risk-low:        oklch(0.725 0.135 150);
  --risk-low-bg:     oklch(0.255 0.055 150);
  --risk-moderate:   oklch(0.815 0.135 88);
  --risk-moderate-bg: oklch(0.275 0.058 88);
  --risk-high:       oklch(0.775 0.150 52);
  --risk-high-bg:    oklch(0.280 0.062 52);
  --risk-very-high:  oklch(0.690 0.180 25);
  --risk-very-high-bg: oklch(0.275 0.065 25);
  --risk-crit:       oklch(0.640 0.195 12);
  --risk-crit-bg:    oklch(0.300 0.080 12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .40);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .35), 0 8px 20px -4px rgba(0, 0, 0, .50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .40), 0 20px 40px -8px rgba(0, 0, 0, .60);
  --ring:      0 0 0 3px oklch(0.715 0.105 192 / 0.30);
  color-scheme: dark;
}

/* `display` on a component class beats the hidden attribute, which silently
   leaves empty alert boxes on screen. This puts the attribute back in charge. */
[hidden] { display: none !important; }

html { font-size: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers in a clinical table must line up column by column, always. */
.mono, .num, td.num, .value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--primary-soft); }

/* A tablet in a consulting room is driven by touch; a desktop by keyboard.
   The focus ring is only drawn for the keyboard. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Somebody who has asked their operating system to stop animations means it,
   and a clinician mid-consultation is exactly who asks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}