/* ==========================================================================
   Sprig Design System — Component classes
   Built entirely from tokens.css. Import tokens.css BEFORE this file.
   Source of truth: "Sprig Components.dc.html" + "Sprig Usage Rules.dc.html".
   Reference these classes/tokens by name — never re-invent an equivalent.
   ========================================================================== */

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--background-default);
  color: var(--color-ink-900);
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-brand-primary); color: var(--color-ink-900); }
a { text-decoration: none; color: inherit; }

/* ---- Typography helpers ------------------------------------------------- */
.t-display { font-size: var(--type-display-size); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); line-height: 1.02; margin: 0; }
.t-heading { font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); letter-spacing: var(--type-heading-tracking); margin: 0; }
.t-title   { font-size: var(--type-title-size);   font-weight: var(--type-title-weight);   letter-spacing: var(--type-title-tracking); margin: 0; }
.t-body    { font-size: var(--type-body-size);    font-weight: var(--type-body-weight); }
.t-caption { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); color: var(--color-ink-300); }
.t-mono    { font-family: var(--font-mono); }
.t-quote   { font-family: var(--font-serif); font-size: var(--type-serif-size); font-weight: var(--type-serif-weight); } /* quotes only */

.t-eyebrow {
  font-size: var(--type-caption-size); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-300); margin: 0;
}

/* ---- Buttons ------------------------------------------------------------ */
/* Rule: exactly ONE .btn--primary per view. Always navy text on yellow.     */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-small);
  font-family: inherit; font-size: var(--button-font-size); font-weight: var(--button-font-weight);
  padding: var(--button-padding); border-radius: var(--button-radius);
  border: none; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn--primary   { background: var(--button-primary-bg); color: var(--button-primary-text); }
.btn--primary:hover   { background: var(--button-primary-hover); }
.btn--secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border: var(--border-width) solid var(--button-secondary-border); }
.btn--secondary:hover { background: var(--background-subtle); }
.btn--ghost     { background: transparent; color: var(--color-ink-700); }
.btn--ghost:hover     { background: var(--background-muted); }
.btn--icon      { padding: 11px; width: 42px; height: 42px; }
.btn:disabled, .btn--disabled {
  background: var(--button-disabled-bg); color: var(--button-disabled-text);
  border: none; cursor: not-allowed;
}

/* ---- Cards -------------------------------------------------------------- */
/* Rule: surface + radius.card + border.default. shadow.card only when floating.
   Never nest a card inside a card.                                           */
.card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.card--floating { box-shadow: var(--card-shadow); }
.card--floating:hover { border-color: var(--color-ink-900); box-shadow: var(--shadow-large); }

/* ---- Forms / inputs ----------------------------------------------------- */
/* Rule: single column, label ABOVE field, gap spacing.medium, errors below.  */
.field { display: flex; flex-direction: column; gap: var(--spacing-small); }
.form  { display: flex; flex-direction: column; gap: var(--spacing-medium); }

.label {
  font-size: var(--type-caption-size); font-weight: 700; color: var(--color-ink-700);
}
.input {
  font-family: inherit; font-size: var(--input-font-size); font-weight: 500;
  color: var(--input-text); background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius); padding: var(--input-padding); outline: none;
  transition: border-color .15s, background .15s;
}
.input::placeholder { color: var(--input-placeholder); }
.input:focus { border-color: var(--input-border-focus); background: var(--background-surface); }
.input--error { border-color: var(--color-accent-red); }
.field__error { font-size: var(--type-caption-size); font-weight: 600; color: var(--color-accent-red); }

/* ---- Badges (status only) ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-badge);
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--green  { color: var(--color-accent-green);  background: var(--color-accent-green-tint); }
.badge--teal   { color: var(--color-accent-teal);   background: var(--color-accent-teal-tint); }
.badge--purple { color: var(--color-accent-purple); background: var(--color-accent-purple-tint); }
.badge--orange { color: var(--color-accent-orange); background: var(--color-accent-orange-tint); }
.badge--red    { color: var(--color-accent-red);    background: var(--color-accent-red-tint); }
.badge--neutral{ color: var(--color-ink-500);       background: var(--background-muted); }

/* ---- Tables ------------------------------------------------------------- */
/* Rule: header background.subtle + uppercase ink.300; rows divided by
   border.subtle; numbers right-aligned + 700; status = badge.               */
.table { width: 100%; border-collapse: collapse; background: var(--background-surface);
         border: 1px solid var(--border-default); border-radius: var(--radius-medium); overflow: hidden; }
.table thead th {
  background: var(--background-subtle);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-300); text-align: left; padding: 12px 18px;
  border-bottom: 1px solid var(--border-default);
}
.table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--background-subtle); }
.table .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Navigation --------------------------------------------------------- */
/* header (top-level + CTA) | sidebar (sections, 1 active) | breadcrumbs | tabs */
.nav-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--background-surface); border-bottom: 1px solid var(--border-default);
  padding: 18px 40px;
}
.nav-link { font-size: 14px; font-weight: 600; color: var(--color-ink-500); }
.nav-link:hover { color: var(--color-ink-900); }

.sidebar-item {
  display: flex; align-items: center; gap: var(--spacing-compact);
  padding: 10px var(--spacing-compact); border-radius: var(--radius-small);
  font-size: 14px; font-weight: 600; color: var(--color-ink-500);
}
.sidebar-item:hover { background: var(--background-muted); color: var(--color-ink-900); }
.sidebar-item--active { background: var(--color-brand-primary-tint); color: var(--color-ink-900); font-weight: 700; }

/* ---- Brand mark --------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 7px; }
.brand__name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.brand__dot  { width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand-primary); margin-top: 6px; }

/* ---- Layout helpers ----------------------------------------------------- */
.container { max-width: 1080px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.highlight { background: var(--color-brand-primary); padding: 0 10px; border-radius: var(--radius-small); }