/* BASE — minimal document reset + shared primitives. Everything else lives in components. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--text-heading); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, h5, h6 { font-family: var(--font-ui); font-size: var(--fs-h4); line-height: var(--lh-ui); letter-spacing: 0; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--fw-semibold); color: var(--text-heading); }
small { font-size: var(--fs-small); }

a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: var(--transition-colors); }
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
a:active { color: var(--accent-active); }

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

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-8) 0; }

/* One focus treatment for the whole system. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
.kan-on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--focus-ring-on-dark); }

/* Skip link — every public page should carry one. */
.kan-skip-link { position: absolute; left: var(--space-4); top: var(--space-4); transform: translateY(-200%); background: var(--accent); color: var(--on-accent); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; z-index: var(--z-toast); transition: transform var(--dur-base) var(--ease-out); }
.kan-skip-link:focus { transform: translateY(0); }

/* Screen-reader-only text (error announcements, icon labels). */
.kan-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Containers */
.kan-container { width: 100%; max-width: var(--container-content); margin-inline: auto; padding-inline: var(--gutter); }
.kan-container-prose { width: 100%; max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--gutter); }
.kan-container-form { width: 100%; max-width: var(--container-form); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .kan-container, .kan-container-prose, .kan-container-form { padding-inline: var(--gutter-lg); } }

/* Section rhythm helpers */
.kan-section { padding-block: var(--section-y); }
.kan-section-alt { padding-block: var(--section-y); background: var(--bg-alt); }
.kan-section-inverse { padding-block: var(--section-y); background: var(--surface-inverse); color: var(--text-on-dark); }
.kan-section-inverse :where(h1, h2, h3, h4) { color: var(--text-on-dark); }

@keyframes kan-shimmer { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
@keyframes kan-spin { to { transform: rotate(360deg); } }