/* public/assets/tk/base.css — reset + element defaults (new-UI pages only) */
body.tk-dark, body.tk-light {
  margin: 0; background: var(--tk-page); color: var(--tk-text);
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body.tk-dark *, body.tk-light * { box-sizing: border-box; }
:where(.tk-dark, .tk-light) :where(h1, h2, h3) {
  font-family: var(--tk-font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--tk-space-4);
}
/* Element defaults use :where() so they carry ZERO specificity — a component class
   (.tk-btn--solid, .tk-nav__link, …) always wins without needing an override. */
:where(.tk-dark, .tk-light) img { max-width: 100%; height: auto; display: block; }
:where(.tk-dark, .tk-light) a { color: inherit; text-decoration: none; }
.tk-body { min-height: 100vh; display: flex; flex-direction: column; }
.tk-main { display: block; flex: 1 0 auto; }
.tk-container { max-width: var(--tk-container); margin-inline: auto; padding-inline: var(--tk-space-6); }
.tk-eyebrow { font-family: var(--tk-font-body); text-transform: uppercase;
  letter-spacing: var(--tk-tracking-label); font-size: var(--tk-fs-label); color: var(--tk-accent-text); }
.tk-caps { text-transform: uppercase; letter-spacing: .01em; }
:where(.tk-dark, .tk-light) a:focus-visible,
:where(.tk-dark, .tk-light) button:focus-visible,
:where(.tk-dark, .tk-light) input:focus-visible,
:where(.tk-dark, .tk-light) [tabindex]:focus-visible {
  outline: 2px solid var(--tk-burgundy); outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-burgundy) 30%, transparent);
}
/* reveal-on-scroll (progressive) */
.tk-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--tk-ease), transform .6s var(--tk-ease); }
.tk-reveal.tk-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tk-reveal { opacity: 1; transform: none; transition: none; }
  :where(.tk-dark, .tk-light) * { scroll-behavior: auto !important; }
}