/* =============================================================
   copilotBC — primitives
   -------------------------------------------------------------
   Reset + element baselines. Uses tokens from core.css; load
   AFTER core.css and (optionally) a layer file.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Default heading scale — marketing site uses these. The app
   overrides them inside `.app-shell` (see tokens/app.css). */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h3 {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h4 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h5 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
h6 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

small, .text-sm { font-size: var(--text-sm); color: var(--color-text-secondary); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}
pre {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: var(--leading-snug);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

/* Selection */
::selection {
  background: var(--color-blue-100);
  color: var(--color-blue-900);
}

/* Focus ring — never remove. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Form labels */
label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* Utility text classes — these appear often enough to standardise. */
.text-primary    { color: var(--color-text-primary); }
.text-secondary  { color: var(--color-text-secondary); }
.text-tertiary   { color: var(--color-text-tertiary); }
.text-inverse    { color: var(--color-text-inverse); }
.text-link       { color: var(--color-text-link); }
.text-success    { color: var(--color-success-bold); }
.text-warning    { color: var(--color-warning-bold); }
.text-danger     { color: var(--color-danger-bold); }
.text-balance    { text-wrap: balance; }
.text-pretty     { text-wrap: pretty; }
.text-mono       { font-family: var(--font-mono); }

.bg-app          { background: var(--color-bg-app); }
.bg-surface      { background: var(--color-bg-surface); }
.bg-subtle       { background: var(--color-bg-subtle); }
.bg-inverse      { background: var(--color-bg-inverse); color: var(--color-text-inverse); }

/* Visually hidden but accessible. */
.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;
}