/* ==========================================================================
   Excellia Private Hospital — design tokens
   Palette and type are pinned by the client's supplied layout sheet.
   ========================================================================== */

:root {
  /* ---- Brand palette (pinned) ---- */
  --blue:        #0D47A1;
  --red:         #D32F2F;
  --navy:        #0A2540;
  --paper:       #F5F7FA;
  --green:       #4CAF50;
  --purple:      #7B1FA2;

  /* ---- Derived ramp ---- */
  --blue-900:    #072e6b;
  --blue-700:    #0b3d8a;
  --blue-600:    #0D47A1;
  --blue-500:    #1559c0;
  --blue-100:    #dce8fb;
  --blue-50:     #eef4fe;

  --red-800:     #9c1f1f;
  --red-700:     #b32626;
  --red-600:     #D32F2F;
  --red-100:     #fbdedd;
  --red-50:      #fdefee;

  --navy-900:    #061726;
  --navy-800:    #0A2540;
  --navy-700:    #123055;

  --green-700:   #33802f;
  --green-100:   #dff2df;
  --purple-700:  #64188a;
  --purple-100:  #f0e2f7;
  --amber-600:   #b26a00;
  --amber-100:   #fdeccd;

  /* ---- Surfaces ---- */
  --surface:        #ffffff;
  --surface-sunk:   #F5F7FA;
  --surface-sunk-2: #eaeff7;
  --surface-invert: var(--navy-800);

  /* ---- Ink ---- */
  --ink:         #0c1b2e;   /* 15.2:1 on white */
  --ink-2:       #3d4d63;   /*  8.1:1 on white */
  --ink-3:       #5a6b80;   /*  5.3:1 on white */
  --ink-on-navy:   #ffffff;
  --ink-2-on-navy: #c3d3e8;  /* tinted from the navy hue, never gray */
  --ink-3-on-navy: #94aac6;

  /* ---- Lines ---- */
  --line:        #dce3ed;
  --line-strong: #c3cddc;
  --line-on-navy: rgba(255, 255, 255, 0.16);

  /* ---- Elevation. Declare once: border OR shadow, never both. ---- */
  --lift-1: 0 1px 2px rgba(10, 37, 64, .06), 0 2px 6px rgba(10, 37, 64, .05);
  --lift-2: 0 2px 4px rgba(10, 37, 64, .05), 0 8px 20px rgba(10, 37, 64, .08);
  --lift-3: 0 4px 8px rgba(10, 37, 64, .06), 0 18px 44px rgba(10, 37, 64, .12);
  --lift-4: 0 8px 16px rgba(10, 37, 64, .08), 0 32px 72px rgba(10, 37, 64, .16);

  /* ---- Radius ---- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;   /* card ceiling */
  --r-pill: 999px; /* small controls only */

  /* ---- Type ---- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-num:     "Inter", ui-monospace, monospace;

  --t-display: 700 clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem)/1.04 var(--font-display);
  --t-h1:      700 clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem)/1.1  var(--font-display);
  --t-h2:      700 clamp(1.65rem, 1.3rem + 1.5vw, 2.4rem)/1.15 var(--font-display);
  --t-h3:      600 clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.3 var(--font-display);
  --t-h4:      600 1.0625rem/1.35 var(--font-display);
  --t-body:    400 1rem/1.65 var(--font-body);
  --t-sm:      400 .875rem/1.55 var(--font-body);
  --t-xs:      500 .75rem/1.45 var(--font-body);

  --track-display: -.032em;
  --track-head:    -.022em;
  --track-label:   .09em;

  /* ---- Space (4px base) ---- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.5rem; --s-8: 3.5rem;
  --s-9: 5rem;   --s-10: 7rem;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
  --dur-4: 900ms;
}

/* ==========================================================================
   Reset + browser surfaces
   The parts we didn't draw still carry the design.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font: var(--t-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* [hidden] must beat any later display declaration, or every hidden panel,
   empty state and tab body renders anyway. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Numerals in data must not jitter between rows. */
[data-num], .num, td, th, time, .stat-value, .metric-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--navy-800); color: #fff; }

:root { accent-color: var(--blue); caret-color: var(--blue); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Themed scrollbars — Firefox then WebKit. */
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-sunk); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--surface-sunk);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

a:not([class]) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Shared utilities ---- */
.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
.shell-wide { width: min(1420px, 100% - var(--gutter) * 2); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 200;
  background: var(--navy-800); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 0; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none;
        stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
        stroke-linejoin: round; }
.icon-sm { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.icon-lg { width: 2rem; height: 2rem; stroke-width: 1.6; }