/* OpenClinicalHistory — base
   Design tokens, reset, typography, buttons.
   Load first: everything else assumes these variables exist.
   Fonts are loaded from Google Fonts in inc/menu.php. */

:root{
  --ink:#05060a; --film:#0b0f17; --film2:#111725;
  --line:rgba(160,182,214,.12); --line-2:rgba(160,182,214,.20);
  --bone:#c3ccdb; --bone-dim:#8593a8; --bone-bright:#eef3fb;
  --amber:#ff9e2e; --amber-2:#ffbe6b; --amber-deep:#cf6a12;
  --maxw:1120px;
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber); margin:0 0 18px;
}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; color:var(--bone-bright); font-weight:700; letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---- buttons ---- */
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:"IBM Plex Sans",sans-serif;
  font-weight:600; font-size:15px; padding:13px 22px; border-radius:10px; text-decoration:none; transition:.2s}
.btn-primary{background:var(--amber); color:#1a0e00; box-shadow:0 0 30px -6px rgba(255,158,46,.55)}
.btn-primary:hover{background:var(--amber-2); box-shadow:0 0 40px -4px rgba(255,158,46,.7)}
.btn-ghost{border:1px solid var(--line-2); color:var(--bone)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber)}

/* ---- accessibility ---- */
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber); color:#1a0e00; font-weight:600; font-size:14px;
  padding:12px 18px; border-radius:0 0 10px 0; text-decoration:none}
.skip:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .stage{opacity:1; transform:none}
  html{scroll-behavior:auto}
}