/* ============================================================
   PYNG · "SONAR" DESIGN SYSTEM
   Foundation: tokens (light + dark), reset, type, layout, kit.
   No glass. Opaque surfaces, hairline rules, two elevations.
   ============================================================ */

/* ---------- TOKENS ---------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* surfaces — cool, clean (never warm beige) */
  --bg:        #EEF1F8;
  --bg-deep:   #E6EAF3;
  --surface:   #FFFFFF;
  --surface-2: #F3F5FB;
  --surface-3: #E9EDF6;

  /* ink */
  --ink:    #111319;
  --ink-2:  #353A45;
  --muted:  #565D6C;
  --faint:  #8B909C;

  /* lines */
  --line:        rgba(17, 19, 25, .09);
  --line-strong: rgba(17, 19, 25, .16);

  /* brand accent — indigo/violet */
  --accent:        #5B4DD1;
  --accent-press:  #4A3DBB;
  --accent-soft:   #ECEAFB;
  --accent-ink:    #4A3DBB;   /* accent text that passes AA on paper */

  /* temperature scale (cold → warm → hot) */
  --cold:    #4E63D6;
  --warm:    #0E9E80;
  --hot:     #B4730F;
  --success: #0B8A60;
  --danger:  #C8443E;

  /* signal/illustration hues used by JS (kept in sync) */
  --tint-cold: #E7EAFB;
  --tint-warm: #DCF1EC;
  --tint-hot:  #F6ECD9;

  --on-accent: #FFFFFF;

  /* elevation — large soft shadows, low opacity (premium) */
  --shadow-1: 0 1px 2px rgba(17,19,25,.04), 0 1px 3px rgba(17,19,25,.05);
  --shadow-2: 0 2px 4px rgba(17,19,25,.04), 0 18px 40px -16px rgba(17,19,25,.18);
  --shadow-3: 0 4px 8px rgba(17,19,25,.05), 0 32px 64px -24px rgba(17,19,25,.24);
  --ring: 0 0 0 3px rgba(91,77,209,.30);
  --hi: inset 0 1px 0 rgba(255,255,255,.6);

  --paper-grain: rgba(17,19,25,.022);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #090F1C;
  --bg-deep:   #060B15;
  --surface:   #101A2C;
  --surface-2: #16233A;
  --surface-3: #1D2C46;

  --ink:    #ECF1FB;
  --ink-2:  #C4D0E6;
  --muted:  #93A4C2;
  --faint:  #5F708C;

  --line:        rgba(233,240,251,.10);
  --line-strong: rgba(233,240,251,.18);

  --accent:        #8C9CFF;
  --accent-press:  #A6B2FF;
  --accent-soft:   rgba(140,156,255,.14);
  --accent-ink:    #A9B5FF;

  --cold:    #7C92FF;
  --warm:    #45D6B6;
  --hot:     #F4B860;
  --success: #5FD39A;
  --danger:  #FF7A74;

  --tint-cold: rgba(124,146,255,.14);
  --tint-warm: rgba(69,214,182,.13);
  --tint-hot:  rgba(244,184,96,.14);

  --on-accent: #0B1020;

  --shadow-1: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.30);
  --shadow-2: 0 2px 6px rgba(0,0,0,.30), 0 24px 48px -18px rgba(0,0,0,.62);
  --shadow-3: 0 4px 10px rgba(0,0,0,.34), 0 40px 80px -28px rgba(0,0,0,.7);
  --ring: 0 0 0 3px rgba(140,156,255,.38);
  --hi: inset 0 1px 0 rgba(255,255,255,.06);

  --paper-grain: rgba(233,240,251,.02);
}

/* radius scale — intentional, not uniform */
:root{
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* spacing 4/8 base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --shell: 1200px;
  --shell-narrow: 760px;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- RESET / BASE --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* ---------- TYPE SCALE ----------------------------------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); text-wrap: balance; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

.lead {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}
.body-lg { font-size: 1.06rem; line-height: 1.7; color: var(--muted); }
p { text-wrap: pretty; }

/* mono label — "instrument reading" — the editorial signature */
.label {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.label .tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  position: relative;
}
.label--muted { color: var(--faint); }
.label--muted .tick { background: var(--faint); box-shadow: 0 0 0 3px var(--line); }

.mono { font-family: var(--font-mono); font-feature-settings: "kern"; }

/* ---------- LAYOUT --------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.shell-narrow { max-width: var(--shell-narrow); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.section { padding-block: clamp(56px, 9vw, 120px); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--band { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section--ink { background: var(--surface-3); }

.eyebrow-row { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.rule { height: 1px; background: var(--line); border: 0; flex: 1; }

/* a hairline contour divider — the depth-sounding motif */
.contour {
  height: 22px;
  background-image: repeating-linear-gradient(
    to right, transparent 0 5px, var(--line) 5px 6px);
  -webkit-mask-image: radial-gradient(120% 200% at 50% -120%, #000 60%, transparent 72%);
          mask-image: radial-gradient(120% 200% at 50% -120%, #000 60%, transparent 72%);
  opacity: .6;
}

/* ---------- ICONS (global sizing — svg fills its sized box) ---------- */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; }
[data-icon] svg { width: 100%; height: 100%; display: block; }

/* ---------- BUTTONS -------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display);
  font-weight: 600; font-size: .96rem; letter-spacing: -0.01em;
  padding: .7em 1.2em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(17,19,25,.18), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,19,25,.2), 0 12px 24px -8px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.btn-lg { font-size: 1.02rem; padding: .82em 1.45em; }
.btn-sm { font-size: .85rem; padding: .54em .9em; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em;
  color: var(--accent-ink); font-weight: 500;
}
.arrow-link svg { transition: transform .18s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- CARDS / SURFACES ----------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: clamp(20px, 2.4vw, 30px); }
.card-hover { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* pills / category chips */
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: .38em .7em;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface);
  transition: border-color .16s, color .16s, background .16s;
}
.chip[aria-pressed="true"], .chip.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.chip-cat { color: var(--cat, var(--accent-ink)); border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--cat, var(--accent)) 10%, var(--surface)); }

/* the temperature dot */
.tdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tdot--cold { background: var(--cold); }
.tdot--warm { background: var(--warm); }
.tdot--hot  { background: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 22%, transparent); }

/* ---------- CALLOUT (the honest-note pattern, kept) ------ */
.callout {
  display: flex; gap: var(--s4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s5);
}
.callout .ic { flex: 0 0 auto; color: var(--accent-ink); margin-top: 2px; }
.callout p { color: var(--muted); font-size: .98rem; line-height: 1.6; }
.callout b { color: var(--ink); font-weight: 600; }

/* ---------- TABLES (editorial) --------------------------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.tbl thead th {
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-strong);
}
.tbl td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.tbl tbody tr:nth-child(even) { background: var(--surface-2); }
.tbl td strong { color: var(--ink); font-weight: 600; }
.tbl .yes { color: var(--success); font-weight: 600; }
.tbl .no  { color: var(--faint); }

/* ---------- NAV ------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); height: 66px; }
.brand { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em; color: var(--ink); justify-self: start; }
.brand .ping { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.brand .ping::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--accent); opacity:.5; animation: ping-ring 2.8s ease-out infinite; }
@keyframes ping-ring { 0%{ transform: scale(.5); opacity:.6; } 100%{ transform: scale(2.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .brand .ping::after{ animation: none; } }

.nav-links { display: flex; align-items: center; gap: 2px; justify-self: center; }
.nav-links a {
  font-size: .92rem; font-weight: 500; color: var(--muted);
  padding: .5em .7em; border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content:""; display:block; height:2px; background: var(--accent); border-radius:2px; margin: 3px .7em 0; }
.nav-right { margin-left: 0; justify-self: end; display: flex; align-items: center; gap: var(--s3); }

.theme-toggle {
  width: 56px; height: 30px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  padding: 3px; display: inline-flex; align-items: center; flex: 0 0 auto;
  transition: background .2s;
}
.theme-toggle .knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1);
  display: grid; place-items: center; color: var(--muted);
  transition: transform .26s cubic-bezier(.34,1.4,.5,1);
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(26px); }
.theme-toggle .knob svg.sun { display: block; }
.theme-toggle .knob svg.moon { display: none; }
[data-theme="dark"] .theme-toggle .knob svg.sun { display: none; }
[data-theme="dark"] .theme-toggle .knob svg.moon { display: block; }

.nav-burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); place-items: center; color: var(--ink); }
.mobile-nav { display: none; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .nav-burger { display: grid; }
  .mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--bg); }
  .mobile-nav.open { display: block; }
  .mobile-nav nav { display: flex; flex-direction: column; padding: var(--s4) 0 var(--s5); gap: 2px; }
  .mobile-nav a { padding: .8em clamp(20px,5vw,48px); color: var(--ink-2); font-weight: 500; }
  .mobile-nav a:hover { background: var(--surface-2); }
  .mobile-nav .btn { margin: var(--s3) clamp(20px,5vw,48px) 0; }
}

/* ---------- FOOTER --------------------------------------- */
.foot { border-top: 1px solid var(--line); background: var(--bg-deep); padding-block: var(--s8) var(--s6); }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s6) var(--s5); }
.foot-brand .brand { margin-bottom: var(--s3); }
.foot-brand p { color: var(--muted); font-size: .92rem; max-width: 30ch; }
.foot-eu { display:inline-flex; align-items:center; gap:.5em; margin-top: var(--s4); font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--faint); }
.foot-eu .ring { width:12px; height:12px; border-radius:50%; border:1.5px dashed var(--accent); }
.foot-col h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: var(--s4); }
.foot-col a { display: block; color: var(--muted); font-size: .92rem; padding: .32em 0; transition: color .15s; }
.foot-col a:hover { color: var(--ink); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--faint); font-size: .84rem; flex-wrap: wrap; }

@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- REVEAL --------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* sonar background texture — concentric hairline rings, CSS only */
.sonar-bg { position: relative; }
.sonar-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-radial-gradient(circle at var(--sx, 86%) var(--sy, 18%),
      transparent 0 38px, var(--line) 38px 39px);
  -webkit-mask-image: radial-gradient(120% 120% at var(--sx,86%) var(--sy,18%), #000, transparent 70%);
          mask-image: radial-gradient(120% 120% at var(--sx,86%) var(--sy,18%), #000, transparent 70%);
  opacity: .5;
}
.sonar-bg > * { position: relative; z-index: 1; }

/* utilities */
.stack > * + * { margin-top: var(--s4); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.grid { display: grid; gap: var(--s5); }
.hide-sm { }
@media (max-width: 720px){ .hide-sm { display: none !important; } }