/* Base: reset + utilities */

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

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* headings + links */
h1 { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: -0.01em; color: var(--text); }
h2 { margin: 0; font-size: var(--fs-xl);  font-weight: var(--fw-semi); color: var(--text); }
h3 { margin: 0; font-size: var(--fs-lg);  font-weight: var(--fw-semi); color: var(--text); }
h4 { margin: 0; font-size: var(--fs-md);  font-weight: var(--fw-semi); color: var(--text); }

p, ul, ol { margin: 0; }

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
a:hover {
  border-bottom-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

button {
  font-family: inherit;
  cursor: pointer;
}

code, kbd, pre, samp {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
}

hr {
  border: 0;
  border-top: var(--border-hair) solid var(--border);
  margin: var(--layout-gap) 0;
}

/* scrollbars */
*::-webkit-scrollbar          { width: 6px; height: 6px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: var(--light); border-radius: var(--radius-pill); }

/* surfaces */
.surface   { background: var(--surface-1); border: var(--border-hair) solid var(--border); border-radius: var(--radius-md); }
.surface-2 { background: var(--surface-2); border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg); }
.surface-3 { background: var(--surface-3); border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg); }

/* layout */
.row        { display: flex; align-items: center; gap: var(--layout-gap); }
.row--between { justify-content: space-between; }
.row--end   { justify-content: flex-end; }
.col        { display: flex; flex-direction: column; }
.col--center { align-items: center; }

.stack-xs > * + * { margin-top: calc(var(--layout-gap) / 4); }
.stack-sm > * + * { margin-top: calc(var(--layout-gap) / 2); }
.stack-md > * + * { margin-top: var(--layout-gap); }
.stack-lg > * + * { margin-top: var(--layout-pad); }

.grid-6,
.grid-12 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--layout-gap); }

.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }

/* text */
.text         { color: var(--text); }
.text-muted   { color: var(--text-muted); }
.text-faint   { color: var(--text-faint); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

.text-mono { font-family: var(--font-main); font-size: var(--fs-xs); letter-spacing: var(--tracking-tight); }
.text-num  { font-family: var(--font-main); font-variant-numeric: tabular-nums; }

.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }

/* state */
.is-loading  { opacity: 0.5; pointer-events: none; }
.is-hidden   { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* scroll areas */
.scroll-y { overflow-y: auto; scrollbar-width: thin; }
.scroll-x { overflow-x: auto; scrollbar-width: thin; }

/* focus */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}