/* ============================================================
   SYNODEV — Base / reset / typography
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis takes over scrolling; disable native smoothing to avoid fighting it */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur-3) var(--ease-soft),
              color var(--dur-3) var(--ease-soft);
}

/* Context inversion --------------------------------------------------- */
.is-dark {
  --bg: var(--dbg);
  --fg: var(--dfg);
  --muted: var(--dmuted);
  --faint: var(--dfaint);
  --line: var(--dline);
  --line-strong: var(--dline-strong);
  --panel: var(--dpanel);
  background: var(--bg);
  color: var(--fg);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--lime); color: var(--ink); }

/* Accessible focus ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.is-dark :focus-visible { outline-color: var(--lime); }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-overlay);
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Utility type -------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: var(--muted);
  max-width: var(--measure);
}
.display { font-size: var(--step-5); font-weight: var(--weight-display); letter-spacing: -0.028em; }
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.display, .h1, .h2 { font-weight: var(--weight-display); }

.accent-lime { color: var(--lime-deep); }
.is-dark .accent-lime { color: var(--lime); }
.accent-teal { color: var(--teal-deep); }
.is-dark .accent-teal { color: var(--teal); }

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