/* ==========================================================================
   LUMEN — base
   Global element defaults shared by every page.

   Note on box-sizing: the LUMEN design was authored with the browser default
   (content-box). Components that need border-box declare it themselves.
   Do not add a global `* { box-sizing: border-box }` — it would change the
   size of every bordered dot, ring and badge in the kit.
   ========================================================================== */

html { height: 100%; }

/* min-height (not height) so the body grows with the page and a sticky
   site header placed directly in <body> stays sticky all the way down. */
body {
  min-height: 100%;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); }
a:hover { color: var(--color-action-hover); }

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

*:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Page themes (set on <body>) ────────────────────────────────────────── */

/* OR Dark (D11): <body data-theme="dark"> — canvas, text, link and focus
   colours follow automatically from the semantic tokens in tokens.css.
   Brand override (D12): <body data-brand="pulse">. */

/* Warm patient canvas — D08 Patient Hub */
body.theme-patient { background: var(--sand-50); }

/* ── Utilities ──────────────────────────────────────────────────────────── */

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

[hidden] { display: none !important; }

/* ── Shared keyframes ───────────────────────────────────────────────────── */

@keyframes lumenPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10, 122, 95, .45); }
  100% { box-shadow: 0 0 0 18px rgba(10, 122, 95, 0); }
}

@keyframes lumenPulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(82, 224, 168, .5); }
  100% { box-shadow: 0 0 0 18px rgba(82, 224, 168, 0); }
}

@keyframes lumenSpin {
  to { transform: rotate(360deg); }
}

@keyframes lumenBreath {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ── Reduced motion: show the final state immediately (K01 · principle 14) */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}