/* Shared styles for pulm.cc pages: fonts, color tokens, base type,
   buttons, footer and the light/dark toggle.
   Light is the default. Dark applies only when the visitor turns it on
   (theme.js sets data-theme="dark" on <html> and remembers the choice). */

/* Self-hosted fonts (SIL OFL 1.1, licenses in /fonts). Latin subset, variable weight. */
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper:   #f7f9fb;
  --card:    #ffffff;
  --ink:     #1c2533;
  --ink-2:   #4b586b;
  --line:    #e2e8ef;
  --tidal:   #0d7a6e;   /* darkened from #0f8a7c so white button text passes 4.5:1 */
  --carina:  #1f6fd1;
  --float:   #c2185b;
  --ref:     #8f5b00;   /* darkened from #a86b00 for the same reason */
  --on-accent: #ffffff; /* text on filled buttons */
  --shade:   28, 37, 51; /* shadow color, as r, g, b */
  --press:   black;     /* mixed into a button color on hover */
  --script: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --body:   "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark: the simulators' cath-lab / ICU-monitor palette. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #0a0e14;
  --card:    #121822;
  --ink:     #eef3fa;
  --ink-2:   #a3b0c2;
  --line:    #232c3a;
  --tidal:   #2dd4bf;
  --carina:  #4ea1ff;
  --float:   #ff9ec7;
  --ref:     #ffce4a;
  --on-accent: #06101a;
  --shade:   0, 0, 0;
  --press:   white;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(38rem 26rem at 8% -4%,  color-mix(in srgb, var(--tidal) 11%, transparent), transparent 70%),
    radial-gradient(34rem 24rem at 62% 2%,  color-mix(in srgb, var(--carina) 9%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 100% 18%, color-mix(in srgb, var(--float) 8%, transparent), transparent 70%),
    var(--paper);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }

.wrap {
  position: relative;
  margin: 0 auto;
  padding-block: 56px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- handwritten swoosh under page titles ---------- */
.swoosh { display: block; width: min(300px, 70vw); height: 22px; margin: 2px 0 14px 4px; }
.swoosh path { fill: none; stroke: url(#ink-grad); stroke-width: 4; stroke-linecap: round; }
.ink-grad-tidal  { stop-color: var(--tidal); }
.ink-grad-carina { stop-color: var(--carina); }
.ink-grad-float  { stop-color: var(--float); }

/* ---------- light/dark toggle ---------- */
.theme-toggle {
  position: absolute; z-index: 2;
  top: 20px; right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  box-shadow: 0 6px 16px -10px rgba(var(--shade), .35);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.theme-toggle[hidden] { display: none; }   /* shown by theme.js; stays hidden without JS */
.theme-toggle:hover { color: var(--ink); transform: rotate(-12deg); }
.theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--carina) 50%, var(--card)); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ---------- buttons (set --c to the accent; defaults to ink) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 700; font-size: 14.5px;
  padding: 10px 18px; border-radius: 999px; min-height: 44px;
  transition: background-color .2s ease, transform .2s ease;
}
.btn.primary { background: var(--c, var(--ink)); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--c, var(--ink)) 86%, var(--press)); }
.btn.secondary { background: color-mix(in srgb, var(--c, var(--ink)) 9%, transparent); color: var(--c, var(--ink)); }
.btn.secondary:hover { background: color-mix(in srgb, var(--c, var(--ink)) 15%, transparent); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--c, var(--ink)) 45%, var(--card)); outline-offset: 2px; }

/* ---------- footer ---------- */
footer { margin-top: 56px; font-size: 14px; color: var(--ink-2); }
footer .wave { display: block; width: 100%; height: 16px; margin-bottom: 14px; }
footer .wave path { fill: none; stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
footer p { margin: 0 0 8px; max-width: 70ch; }
footer strong { color: var(--ink); }
footer .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
footer .meta a { font-family: var(--script); font-size: 24px; font-weight: 700; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .theme-toggle { transition: none; }
  .theme-toggle:hover { transform: none; }
}