/* ============================================================================
   OPERANT — BASE LAYER
   Minimal reset + typographic defaults + a small utility set.
   Depends on: tokens.css (must load first).
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0; /* Inter tweaks */
}

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

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

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

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Global focus discipline — visible ring for keyboard, none for pointer */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Typography roles ---- */
.text-display { font-family: var(--font-display); font-size: var(--fs-3xl);
  font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.text-title   { font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.text-heading { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.text-subhead { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.text-body    { font-size: var(--fs-md); line-height: var(--lh-normal); }
.text-body-lg { font-size: var(--fs-lg); line-height: var(--lh-relaxed); } /* AI prose */
.text-sm      { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.text-caption { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.text-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); }

.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-faint  { color: var(--color-text-faint); }

/* Monospace sub-system — prompts, logs, traces, tool calls, structured output */
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}
code {
  font-size: 0.9em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}
pre {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  background: var(--color-surface-sunken);
  color: var(--color-code-text);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: var(--border-hairline) solid var(--color-border-subtle);
}
kbd {
  font-size: var(--fs-2xs);
  background: var(--color-surface-elevated);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-text-muted);
}

/* Numeric alignment for tables/metrics */
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Small utility set (spacing uses tokens only) ---- */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); }
.gap-12{ gap: var(--space-12);} .gap-16{ gap: var(--space-16);}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Breadcrumb-style rows: shrink and clip before pushing sibling tags off a topbar */
.crumb { min-width: 0; overflow: hidden; white-space: nowrap; }
.crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.divider  { height: 1px; background: var(--color-divider); border: 0; }
.vdivider { width: 1px; align-self: stretch; background: var(--color-divider); }
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }

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

/* Custom scrollbars — quiet, operational */
.scroll-y::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-y::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb {
  background: var(--color-border-strong); border-radius: var(--radius-full);
  border: 3px solid transparent; background-clip: content-box;
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); background-clip: content-box; }