@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--ka-font-sans); background: var(--ka-bg); color: var(--ka-text); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--ka-shadow-focus); }
::selection { background: color-mix(in srgb, var(--ka-primary) 35%, transparent); }

.ka-container { width: min(var(--ka-max-width), calc(100% - 2rem)); margin-inline: auto; }
.ka-stack { display: grid; gap: var(--ka-space-4); }
.ka-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ka-space-3); }
.ka-surface { background: var(--ka-surface); border: 1px solid var(--ka-border); border-radius: var(--ka-radius-lg); box-shadow: var(--ka-shadow-1); }
.ka-muted { color: var(--ka-text-muted); }
.ka-eyebrow { color: var(--ka-primary-strong); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ka-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ka-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: .72rem 1rem; border-radius: var(--ka-radius-md);
  border: 1px solid transparent; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: transform var(--ka-transition-fast), border-color var(--ka-transition-fast), background var(--ka-transition-fast);
}
.ka-button:hover { transform: translateY(-1px); }
.ka-button--primary { background: linear-gradient(145deg, var(--ka-primary-strong), var(--ka-primary)); color: var(--ka-primary-ink); }
.ka-button--secondary { background: var(--ka-surface); border-color: var(--ka-border); color: var(--ka-text); }
.ka-button--ghost { background: transparent; color: var(--ka-text-muted); }
.ka-button--danger { background: color-mix(in srgb, var(--ka-danger) 18%, var(--ka-surface)); border-color: color-mix(in srgb, var(--ka-danger) 40%, transparent); color: var(--ka-text); }

.ka-card { background: var(--ka-surface); border: 1px solid var(--ka-border); border-radius: var(--ka-radius-lg); padding: var(--ka-space-5); box-shadow: var(--ka-shadow-1); }
.ka-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border-radius: var(--ka-radius-pill); background: var(--ka-surface-soft); color: var(--ka-text-muted); font-size: .78rem; }
.ka-progress { height: .5rem; overflow: hidden; border-radius: var(--ka-radius-pill); background: var(--ka-surface-soft); }
.ka-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ka-primary), var(--ka-primary-strong)); }

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

/* Genesis v0.1 shared primitives */
.ka-reading { width: min(var(--ka-reading-width), calc(100% - 2rem)); margin-inline: auto; }
.ka-kicker { color: var(--ka-primary-strong); font-size: .72rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.ka-display { margin: 0; font-family: var(--ka-font-serif); font-size: clamp(3rem, 8vw, 6.8rem); line-height: .94; letter-spacing: -.055em; }
.ka-lead { color: var(--ka-text-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.7; }
.ka-divider { height: 1px; background: var(--ka-border); border: 0; }
.ka-icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--ka-border); border-radius: 50%; background: var(--ka-surface); color: var(--ka-text); cursor: pointer; }
.ka-icon-button:hover { border-color: var(--ka-border-strong); transform: translateY(-1px); }