/* ============================================================================
   T3Bootstrap · Base element styles
   Applies the tokens to native HTML so cards, UI kits and prototypes inherit
   the brand without extra classes. Bootstrap-flavored, token-driven.
   ============================================================================ */

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

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

body {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-base);
  font-weight: var(--ds-weight-normal);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-heading-weight);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-snug);
  color: var(--ds-text);
  text-wrap: balance;
}
h1 { font-size: var(--ds-h1); }
h2 { font-size: var(--ds-h2); }
h3 { font-size: var(--ds-h3); }
h4 { font-size: var(--ds-h4); }
h5 { font-size: var(--ds-h5); }
h6 { font-size: var(--ds-h6); }

p { margin: 0 0 1rem; text-wrap: pretty; }
p.lead { font-size: var(--ds-lead); color: var(--ds-text-muted); line-height: 1.55; }

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

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

code, kbd, pre, samp {
  font-family: var(--ds-font-mono);
  font-size: .9em;
}
code {
  background: var(--ds-surface-sunken);
  color: var(--ds-primary-active);
  padding: .12em .4em;
  border-radius: var(--ds-radius-sm);
}
pre {
  background: var(--ds-gray-800);
  color: var(--ds-text-on-dark);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius);
  overflow: auto;
}
pre code { background: none; color: inherit; padding: 0; }

hr {
  border: 0;
  border-top: var(--ds-border-width) solid var(--ds-border);
  margin: var(--ds-space-lg) 0;
}

/* Eyebrow / overline label used across marketing surfaces */
.ds-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

::selection { background: var(--ds-primary-subtle); color: var(--ds-primary-active); }