/* LHW Stack — shared design tokens & shell (header, footer, buttons, section grid) */

:root{
  /* brand */
  --ink:#141a24;
  --ink-2:#1a2233;
  --ink-3:#28324a;
  --paper:#f3f5f8;
  --paper-2:#e6eaf1;
  --paper-3:#cdd4e0;
  --accent:#3fb6e8;
  --accent-2:#b98ae8;
  --accent-deep:#157aab;
  --good:#3ecf8e;

  --bg:var(--ink);
  --panel:var(--ink-2);
  --hairline:var(--ink-3);
  --fg:#f5f6f8;
  --fg-dim:#8b96ab;
  --link:var(--accent);

  --font-display:'Space Grotesk','Segoe UI',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Segoe UI',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Cascadia Code','JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;

  --maxw:1120px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:var(--paper);
    --panel:var(--paper-2);
    --hairline:var(--paper-3);
    --fg:var(--ink);
    --fg-dim:#545f74;
    --link:var(--accent-deep);
    color-scheme: light;
  }
  .logo-dark{ display:inline-block; }
  .logo-light{ display:none; }
}
.logo-light{ display:inline-block; }
.logo-dark{ display:none; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:
    radial-gradient(480px 320px at 88% -6%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    radial-gradient(520px 360px at -8% 108%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--fg);
  font-family:var(--font-sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--fg-dim);
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.01em; }
p{ text-wrap:pretty; }
code, .mono{ font-family:var(--font-mono); }
img{ max-width:100%; display:block; }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--hairline);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:28px; width:auto; }
.navlinks{ display:flex; gap:24px; font-size:.88rem; }
.navlinks a{ color:var(--fg-dim); text-decoration:none; }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color:var(--fg); }
.btn{
  font-family:var(--font-mono); font-size:.82rem; text-decoration:none;
  padding:9px 16px; border:1px solid var(--hairline); color:var(--fg);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:border-color .15s, background .15s, transform .15s;
  background:none; cursor:pointer;
}
.btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#0c1420; font-weight:700; }
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }

/* ---------- section shell ---------- */
section{ padding:64px 0; border-top:1px solid var(--hairline); }
.section-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2rem); }
.section-head p{ color:var(--fg-dim); max-width:48ch; margin:8px 0 0; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hairline); padding:36px 0 48px; }
.foot-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:start; font-size:.85rem; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ height:20px; width:20px; }
.foot-meta{ color:var(--fg-dim); }
.foot-meta code{ color:var(--fg); }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ color:var(--fg-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--fg); }