/* =============================================
   SHARED THEME — index.html, project.html and
   sickkids-fluid-detection.html all load this.
   Change the tokens below to re-skin the site.
   ============================================= */
:root {
  --bg:            #0a0f1c;
  --surface:       #0f1626;
  --surface-2:     #151e33;
  --ink:           #eef1f7;
  --muted:         #97a1b8;
  --border:        #1f2a42;
  --border-strong: #34435f;
  --accent:        #ff6a3d;
  --accent-hover:  #ff8259;
  --accent-fg:     #0a0f1c;
  --accent-soft:   rgba(255, 106, 61, 0.14);
  --tag-bg:        rgba(255, 255, 255, 0.04);
  --nav-bg:        rgba(10, 15, 28, 0.82);

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nav-h:  64px;
  --max:    1080px;
  --gap:    48px;
  --radius: 4px;
  /* aligns nav/footer edges with the centered content column on wide screens */
  --edge:   max(var(--gap), calc((100vw - var(--max)) / 2 + var(--gap)));
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* NAV (shared shell) */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge);
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.nav-logo::before { content: ''; width: 8px; height: 8px; background: var(--accent); }
.nav-back { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color 0.2s; }
.nav-back:hover { color: var(--accent); }
.nav-back:hover svg { transform: translateX(-3px); }
.nav-back svg { transition: transform 0.2s; }

/* BUTTONS + TAGS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all 0.2s;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.tag { font-family: var(--mono); font-size: 11px; padding: 4px 10px; background: var(--tag-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); }

/* ANIMATION */
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

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