/* dangomby.com — shared design system
   Extracted and reconciled from the site's per-page stylesheets.
   Page-specific layout (hero treatments, article body, diagrams, etc.) stays inline per page. */

:root{
  --bg: #0B0E14; --bg-rgb: 11,14,20; --bg-elev: #11151E; --bg-elev-2: #171C27;
  --ink: #EDEEF2; --muted: #8B93A7; --muted-2: #7A84A0;
  --accent: #E8A33D; --accent-dim: #7A5A28; --accent-ink: #1a1204; --accent-glow-rgb: 232,163,61;
  --selection-ink: #0B0E14;
  --line: rgba(237,238,242,0.09); --line-strong: rgba(237,238,242,0.16);
  --maxw: 1180px;
}
[data-theme="light"]{
  --bg: #F8F5EF; --bg-rgb: 248,245,239; --bg-elev: #FFFFFF; --bg-elev-2: #FDFBF7;
  --ink: #0B0E14; --muted: #6B6558; --muted-2: #786F60;
  --accent: #68282A; --accent-dim: #DEA947; --accent-ink: #FBF8F2; --accent-glow-rgb: 104,40,42;
  --selection-ink: #F8F5EF;
  --line: rgba(11,14,20,0.09); --line-strong: rgba(11,14,20,0.16);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--selection-ink); }
*, *::before, *::after{
  transition: background-color .45s cubic-bezier(0.16,1,0.3,1),
              border-color .45s cubic-bezier(0.16,1,0.3,1),
              box-shadow .45s cubic-bezier(0.16,1,0.3,1),
              color .45s cubic-bezier(0.16,1,0.3,1) .08s;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Source Serif 4', serif; font-weight:450; margin:0; letter-spacing:-0.01em; }
h1, .brand{ transition: color .15s ease; }
.brand .dot{ transition: background-color .15s ease; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media(max-width:640px){ .wrap{ padding:0 20px; } }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

header{ position:sticky; top:0; z-index:50; background:rgba(var(--bg-rgb),0.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.02em; }
.brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-glow-rgb),0.15); }
.navlinks{ display:flex; align-items:center; gap:36px; }
.navlinks a{ font-size:14px; color:var(--muted); transition:color .2s ease; }
.navlinks a:hover{ color:var(--ink); }
.navlinks a.active{ color:var(--accent); }
.navlinks .cta{ color:var(--bg); background:var(--ink); padding:8px 20px; border-radius:100px; font-weight:500; font-size:13px; }
.navlinks .cta:hover{ background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px rgba(var(--accent-glow-rgb),0.25); transition:background .1s ease, color .1s ease, box-shadow .1s ease; }
.theme-toggle{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-strong); background:transparent; color:var(--muted);
  cursor:pointer; padding:0; transition:border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--muted); }
.theme-toggle-label, .theme-toggle-switch{ display:none; }
.icon-moon{ display:none; }
[data-theme="light"] .icon-sun{ display:none; }
[data-theme="light"] .icon-moon{ display:block; }
@media(max-width:760px){
  .navlinks a:not(.cta){ display:none; }
  .navlinks{ gap:12px; }
  .theme-toggle{ width:38px; height:38px; }
}

.btn-primary{ background:var(--accent); color:var(--accent-ink); padding:14px 24px; border-radius:100px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:box-shadow .2s ease; }
.btn-primary:hover{ box-shadow:0 10px 24px rgba(var(--accent-glow-rgb),0.22); }
.btn-ghost{ border:1px solid var(--line-strong); padding:14px 24px; border-radius:100px; font-weight:500; font-size:14px; color:var(--ink); transition:border-color .2s ease, background .2s ease; }
.btn-ghost:hover{ border-color:var(--muted); background:var(--bg-elev); }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:12px 20px; font-family:'IBM Plex Mono', monospace; font-size:13px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

.inline-link{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

footer{ border-top:1px solid var(--line); padding:32px 0; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted-2); }
footer a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
footer a:hover{ color:var(--accent); }

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