/* BASE — document defaults only. Everything else is composed from tokens at
   the component level; this system ships no utility framework. */

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

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

body{
  margin:0;
  background:var(--bg-app);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:var(--line-body);
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

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

/* Links are defined here so a link added later can never render browser blue. */
a{ color:var(--text-accent); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--accent-ink); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  line-height:var(--line-display-lg);
  letter-spacing:var(--tracking-display);
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--paper); }

/* FOCUS — 2px accent ring at 2px offset, keyboard only, on every interactive
   element. Never removed, never replaced with a color change alone. */
:focus-visible{
  outline:var(--stroke-emphasis) solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-ring);
}

/* Data is mono with tabular figures and right-aligned in columns — so a
   column of numbers can be read down. */
.io-data{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.io-editorial{ font-family:var(--font-body); max-width:var(--measure-reading); }
.io-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* I9 · an unstyled native control paints the browser's blue — the one colour
   the palette does not contain. */
input,textarea,select,progress{ accent-color:var(--accent); caret-color:var(--ink); }

/* I11 · the scroller contract. .io-scroll contains overscroll; .io-rail is a
   scroller whose bar is hidden and whose last 16px fade so a cut-off row reads
   as "more", not "broken"; .io-anchor keeps a jumped-to target clear of the
   fixed header. */
.io-rail{ overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.io-rail::-webkit-scrollbar{ display:none; }
.io-anchor{ scroll-margin-top:calc(var(--shell-header, 56px) + var(--gap-md)); }

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