/* ==========================================================================
   BASE — reset, typography classes, layout primitives.  (Ledger v1.0)
   Consumes tokens.css only.
   ========================================================================== */

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

* { margin: 0; }

html {
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  min-height: 100dvh;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
ul[class], ol[class] { list-style: none; padding: 0; }
strong { font-weight: var(--font-weight-semibold); }
hr { border: none; border-top: 1px solid var(--color-border-subtle); }

/* --------------------------------------------------------------------------
   Typography utility classes (one per scale entry)
   -------------------------------------------------------------------------- */
.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--leading-display-xl); font-weight: 700; letter-spacing: -0.025em; }
.t-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); line-height: var(--leading-display-lg); font-weight: 700; letter-spacing: -0.02em; }
.t-display-md { font-family: var(--font-display); font-size: var(--text-display-md); line-height: var(--leading-display-md); font-weight: 600; letter-spacing: -0.015em; }
.t-heading-xl { font-size: var(--text-heading-xl); line-height: var(--leading-heading-xl); font-weight: 600; letter-spacing: -0.02em; }
.t-heading-lg { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); font-weight: 600; letter-spacing: -0.015em; }
.t-heading-md { font-size: var(--text-heading-md); line-height: var(--leading-heading-md); font-weight: 600; letter-spacing: -0.008em; }
.t-heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: 600; letter-spacing: -0.005em; }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.t-body    { font-size: var(--text-body); line-height: var(--leading-body); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: 0.005em; }
.t-overline {
  font-size: var(--text-overline); line-height: var(--leading-overline);
  font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase;
}
.t-overline-mono { font-family: var(--font-mono); font-size: var(--text-overline); line-height: var(--leading-overline); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase; }

.t-data-xl { font-family: var(--font-mono); font-size: var(--text-data-xl); line-height: var(--leading-data-xl); font-weight: 600; letter-spacing: -0.01em; }
.t-data-lg { font-family: var(--font-mono); font-size: var(--text-data-lg); line-height: var(--leading-data-lg); font-weight: 600; letter-spacing: -0.005em; }
.t-data-md { font-family: var(--font-mono); font-size: var(--text-data-md); line-height: var(--leading-data-md); font-weight: 500; }
.t-data    { font-family: var(--font-mono); font-size: var(--text-data); line-height: var(--leading-data); font-weight: 500; }
.t-data-sm { font-family: var(--font-mono); font-size: var(--text-data-sm); line-height: var(--leading-data-sm); font-weight: 500; }
.t-code    { font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--leading-code); font-weight: 400; }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-brand     { color: var(--color-brand-text); }
.text-accent    { color: var(--color-accent-text); }
.text-success   { color: var(--color-success-text); }
.text-warning   { color: var(--color-warning-text); }
.text-danger    { color: var(--color-danger-text); }
.mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container-marketing { max-width: var(--container-marketing); margin-inline: auto; padding-inline: var(--space-6); }
.container-app       { max-width: var(--container-app); margin-inline: auto; padding-inline: var(--space-8); }
.container-prose     { max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--space-6); }

@media (max-width: 920px) {
  .container-app { padding-inline: var(--space-6); }
}
@media (max-width: 720px) {
  .container-marketing, .container-app, .container-prose { padding-inline: var(--space-4); }
}

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

.hide { display: none !important; }

/* Screen-view switcher (prototype router shows exactly one) */
.screen-view { display: none; }
.screen-view.active { display: block; animation: screen-in var(--motion-base) var(--ease-out); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Focus, selection, a11y
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: none;
}

::selection { background: rgba(44, 226, 162, 0.28); color: var(--color-text-primary); }
[data-theme="light"] ::selection { background: rgba(15, 157, 107, 0.22); }

.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;
}

.skip-link {
  position: fixed; top: -48px; left: var(--space-4);
  z-index: calc(var(--z-nav) + 1);
  background: var(--color-brand); color: var(--color-on-brand);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-weight: 600; transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); color: var(--color-on-brand); }

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

/* Links that end in an arrow/↗ — keep the glyph glued to the last word */
.arrow-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Icons (inline SVG, stroke-based)
   -------------------------------------------------------------------------- */
.icon {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   Scrollbars (subtle, theme-aware)
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Prose (legal pages, methodology longform)
   -------------------------------------------------------------------------- */
.prose { color: var(--color-text-secondary); }
.prose h2 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); font-weight: 600; letter-spacing: -0.015em; color: var(--color-text-primary); margin: var(--space-10) 0 var(--space-3); }
.prose h3 { font-size: var(--text-heading-md); line-height: var(--leading-heading-md); font-weight: 600; color: var(--color-text-primary); margin: var(--space-6) 0 var(--space-2); }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--color-text-primary); }
.prose .mono, .prose code { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-text-primary); background: var(--color-bg-inset); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xs); padding: 1px 5px; }