@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;

  --leading-tight:  1.2;
  --leading-base:   1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: var(--leading-base);
}

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

.t-label   { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
              letter-spacing: var(--tracking-wider); color: var(--text-secondary); }
.t-mono    { font-family: var(--font-mono); }
.t-muted   { color: var(--text-secondary); }
.t-dim     { color: var(--text-muted); }
.t-accent  { color: var(--accent); }
.t-ok      { color: var(--ok); }
.t-warn    { color: var(--warn); }
.t-err     { color: var(--err); }

/* Utilities — shared weight/padding helpers used across DS pages */
.p-8    { padding: var(--sp-8); }
.fw-600 { font-weight: var(--fw-semibold); }

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
legend { color: var(--text-secondary); }
fieldset { border-color: var(--border); }