/* ==========================================================================
   TogNinja — Base: reset, typography, primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the fixed header when jumping to an anchor */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--tn-bg);
  color: var(--tn-text);
  font-family: var(--tn-font-body);
  font-size: var(--tn-fs-body);
  line-height: var(--tn-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--tn-font-display);
  font-weight: 600;
  line-height: var(--tn-lh-snug);
  letter-spacing: var(--tn-track-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tn-dur-fast) var(--tn-ease);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --- Focus ---------------------------------------------------------------
   Never remove the ring. Keyboard users must always see where they are. */
:focus-visible {
  outline: 2px solid var(--tn-teal);
  outline-offset: 3px;
  border-radius: var(--tn-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--tn-teal); color: var(--tn-bg); }

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--tn-s4);
  top: var(--tn-s4);
  z-index: var(--tn-z-skip);
  padding: var(--tn-s3) var(--tn-s5);
  background: var(--tn-teal);
  color: var(--tn-bg);
  font-weight: 600;
  border-radius: var(--tn-r-sm);
  transform: translateY(-200%);
  transition: transform var(--tn-dur-fast) var(--tn-ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- Layout primitives --------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--tn-maxw);
  margin-inline: auto;
  padding-inline: var(--tn-gutter);
}

.section { padding-block: var(--tn-section-y); position: relative; }

.section--hairline { border-top: 1px solid var(--tn-line-soft); }

.prose { max-width: var(--tn-maxw-prose); }

.stack > * + * { margin-top: var(--tn-s4); }

/* --- Type helpers -------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-s3);
  font-size: var(--tn-fs-micro);
  font-weight: 600;
  letter-spacing: var(--tn-track-wide);
  text-transform: uppercase;
  color: var(--tn-muted);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tn-teal));
}

.h2 { font-size: var(--tn-fs-h2); }
.h3 { font-size: var(--tn-fs-h3); }

.lead {
  font-size: var(--tn-fs-lead);
  line-height: 1.5;
  color: var(--tn-muted);
}

.muted { color: var(--tn-muted); }

.accent { color: var(--tn-teal); }

/* Gradient text — kept subtle. Fallback colour set first for old engines. */
.grad {
  color: var(--tn-teal);
  background: linear-gradient(100deg, var(--tn-teal), var(--tn-cyan) 60%, var(--tn-amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mono {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-fs-micro);
  letter-spacing: 0.06em;
}

/* --- Screen-reader only --------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}