/* ============================================================================
   Cary base — element defaults + reusable component primitives, all bound to
   tokens.css. Include tokens.css FIRST, then this. Gives any page the house
   look: Fraunces headings, mono labels, fir accent, the pride-rule motif.

   Naming: plain element styles + a small set of .cary-* component classes.
   Utilities are prefixed u-. Everything reads from var(--…); no raw hexes.
   ============================================================================ */

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

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

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

/* ---- headings: Fraunces display, tight, optical-sized ---------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' var(--display-opsz);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); max-width: 68ch; }      /* explainer measure */
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: var(--border-hair) solid var(--line); margin: var(--space-6) 0; }

::selection { background: var(--accent-soft); color: var(--ink); }

/* ---- utilities ------------------------------------------------------------ */
.u-mono   { font-family: var(--font-mono); }
.u-dim    { color: var(--dim); }
.u-nums   { font-variant-numeric: tabular-nums; }

/* the recurring "kicker": mono, uppercase, accent — brands a section instantly */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- the signature motif: the pride hairline ------------------------------ */
/* a thin 6-band rule of the spectrum. Use it as a top border on hero cards,
   section rules, or a page header underline. The one element that says
   "gay + PNW" without a word of copy. */
.pride-rule {
  display: flex;
  height: 5px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.pride-rule > * { flex: 1; }
.pride-rule .b1 { background: var(--s1); } .pride-rule .b2 { background: var(--s2); }
.pride-rule .b3 { background: var(--s3); } .pride-rule .b4 { background: var(--s4); }
.pride-rule .b5 { background: var(--s5); } .pride-rule .b6 { background: var(--s6); }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--accent-soft); color: var(--accent); }
.btn--quiet { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 var(--border-hair) var(--line); }

/* ---- tags & status badges ------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
}

.stage {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--status-dormant-bg); color: var(--status-dormant);
}
.stage--build { background: var(--status-build-bg); color: var(--status-build); }
.stage--test  { background: var(--status-test-bg);  color: var(--status-test); }
.stage--live  { background: var(--status-live-bg);  color: var(--status-live); }
.stage--done  { background: var(--status-done-bg);  color: var(--status-done); }

/* ---- surfaces ------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card__pad { padding: var(--space-5); }

/* ---- metric strip (mono numerals, the dashboard staple) ------------------- */
.metric__v {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.metric__l {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--dim); margin-top: var(--space-2);
}