/* ============================================================
   Airport Physical AI Readiness Index — shared foundation
   Design tokens, typography, and components used on every page.
   ============================================================ */

:root{
  color-scheme: light;
  --ground:#eef1f4;
  --surface:#ffffff;
  --surface-2:#f6f8fa;
  --ink:#101820;
  --ink-2:#41505e;
  --muted:#6b7986;
  --line:#d6dce2;
  --line-soft:#e5eaef;
  --accent:#1b4f8f;
  --accent-soft:#e8f0fa;
  --amber:#9d6410;
  --amber-soft:#faf1e0;

  /* Maturity ramp — one hue, light to dark. Validated for contrast
     against the light surface as an ordinal scale. */
  --m0:#86b6ef; --m1:#5598e7; --m2:#2a78d6; --m3:#1c5cab; --m4:#104281;

  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b;
  --track:#e2e7ec;
  --shadow:0 1px 2px rgba(16,24,32,.05), 0 8px 24px -16px rgba(16,24,32,.28);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0d1218; --surface:#182028; --surface-2:#1e2831;
    --ink:#dde4ea; --ink-2:#aab6c2; --muted:#8695a2;
    --line:#2b3540; --line-soft:#232d37;
    --accent:#6ea6e6; --accent-soft:#1a2836;
    --amber:#e0a040; --amber-soft:#2b2317;
    --m0:#184f95; --m1:#256abf; --m2:#3987e5; --m3:#86b6ef; --m4:#cde2fb;
    --track:#232d37;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0d1218; --surface:#182028; --surface-2:#1e2831;
  --ink:#dde4ea; --ink-2:#aab6c2; --muted:#8695a2;
  --line:#2b3540; --line-soft:#232d37;
  --accent:#6ea6e6; --accent-soft:#1a2836;
  --amber:#e0a040; --amber-soft:#2b2317;
  --m0:#184f95; --m1:#256abf; --m2:#3987e5; --m3:#86b6ef; --m4:#cde2fb;
  --track:#232d37;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important; transition:none!important}}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-.018em; line-height:1.18}
p{margin:0}
a{color:var(--accent)}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.hidden{display:none!important}

.shell{max-width:1060px; margin:0 auto; padding:0 24px}

/* ---------- masthead ---------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 0 18px; border-bottom:1px solid var(--line);
}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.wordmark .mk{
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:#fff; background:var(--accent); padding:4px 7px; border-radius:2px;
}
:root[data-theme="dark"] .wordmark .mk{color:#0d1218}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wordmark .mk{color:#0d1218}}
.wordmark .nm{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.01em}
.stamp{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:4px;
  border:1px solid transparent; background:var(--accent); color:#fff; font-weight:600;
  font-size:15px; cursor:pointer; text-decoration:none; transition:filter .15s, transform .1s;
}
:root[data-theme="dark"] .btn{color:#0d1218}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{color:#0d1218}}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.btn.lg{padding:16px 28px; font-size:16.5px}
.btn.sm{padding:9px 15px; font-size:13.5px}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow)}
.code{
  font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:2px 5px; border-radius:2px; flex:none;
}
.fineprint{font-size:12.5px; color:var(--muted); max-width:58ch}
.warn{font-size:13.5px; color:var(--amber); font-weight:500}
.ok{font-size:13.5px; color:var(--good); font-weight:500}

.footer{
  margin-top:64px; padding:26px 0 40px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer a{color:var(--muted)}