/* ==========================================================================
   DELTA — Base
   Reset, document defaults, keyframes and a small set of utilities.
   Depends on: tokens.css
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: var(--ink);
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--action);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Keyframes (shared by all pages) ---------------------------------------- */
@keyframes pop {
  0%   { opacity: 0; transform: translateY(6px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes curA {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(180px, 60px); }
  60%      { transform: translate(220px, 190px); }
  80%      { transform: translate(40px, 150px); }
}

@keyframes curB {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-160px, -40px); }
  65%      { transform: translate(-60px, 120px); }
}

@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Typography helpers ----------------------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

/* Mono label — the "K01 · Foundations" / "DEMO · ROADNOTE" style */
.label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}
.label--sm { font-size: 12px; }
.label--xs { font-size: 11px; }
.label--caps { letter-spacing: .06em; text-transform: uppercase; }

/* Text colors */
.text-1      { color: var(--ink); }
.text-2      { color: var(--ink-2); }
.text-3      { color: var(--ink-3); }
.text-action { color: var(--action); }
.text-pos    { color: var(--pos); }
.text-neg    { color: var(--neg); }
.text-warn   { color: var(--warn); }

.tabular { font-variant-numeric: tabular-nums; }

/* Accessibility ---------------------------------------------------------- */
.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;
}

/* Design annotations ------------------------------------------------------
   Dark "◆ NOTE" boxes that explain design decisions. Hidden by default;
   shown with <html data-annotations> or ?annotations=1 in the URL.        */
.annotation {
  display: none;
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 5;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--inverse);
  color: var(--on-inverse);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.annotation__title {
  color: var(--action);
}

[data-annotations] .annotation {
  display: block;
}