/* ─────────────────────────────────────────────────────────────────────────
   Trailgrade — design tokens
   Generated from trailgrade-powersports-build-spec.md. Single source of truth for
   the child theme. Do not hardcode a colour or a size anywhere else.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ---- colour ------------------------------------------------------- */
  --tg-graphite: #14161A;   /* page ground, footer — dominant            */
  --tg-steel:    #2E3338;   /* cards, panels, raised surfaces — ~25%     */
  --tg-ash:      #7C838A;   /* borders, dividers, muted labels           */
  --tg-bone:     #ECEDE9;   /* primary text, logo on dark — dominant     */
  --tg-blaze:    #E8560F;   /* THE accent. links, focus, primary button  */
  
  --tg-ok:       #6B9E78;
  --tg-err:      #C9615B;

  /* Budgets are not enforceable in CSS, so they live here as a reminder:
     blaze <= 8% of any screen, and UI ONLY — links, primary buttons, the
     rule above the wordmark. It never appears inside the logo: an accent
     inside an emblem reads decorative, and this category's brands are all
     single-colour and stamped-looking.
     No #000, no #fff anywhere in this project.                          */

  --tg-blaze-hover: color-mix(in srgb, var(--tg-blaze) 82%, white);
  --tg-border:        color-mix(in srgb, var(--tg-ash) 35%, transparent);
  --tg-surface-raised: color-mix(in srgb, var(--tg-steel) 88%, white);

  /* ---- type --------------------------------------------------------- */
  --tg-font-display: "Archivo", "Helvetica Neue", sans-serif;
  --tg-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --tg-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --tg-t-hero: 3.815rem;   /* 61px — drops to 2.5rem at 768px            */
  --tg-t-h1:   3.052rem;
  --tg-t-h2:   2.441rem;
  --tg-t-h3:   1.953rem;
  --tg-t-h4:   1.563rem;
  --tg-t-body: 1rem;
  --tg-t-sm:   0.875rem;
  --tg-t-xs:   0.8rem;

  --tg-lh-tight: 1.05;
  --tg-lh-head:  1.2;
  --tg-lh-body:  1.6;

  /* Archivo is wide, not condensed — it needs far less tracking than
     Shieldworks' Barlow. This is the wordmark's own value; keep identical. */
  --tg-track-display: 0.045em;
  --tg-track-mono:   -0.01em;

  --tg-measure: 68ch;

  /* ---- space (4px base, 8px rhythm) --------------------------------- */
  --tg-1: 4px;   --tg-2: 8px;   --tg-3: 12px;  --tg-4: 16px;
  --tg-5: 24px;  --tg-6: 32px;  --tg-7: 48px;  --tg-8: 64px;
  --tg-9: 96px;  --tg-10: 128px;

  /* ---- form --------------------------------------------------------- */
  --tg-radius: 2px;        /* machined, not soft. do not raise this      */
  --tg-border-w: 1px;
  --tg-maxw: 1280px;
  --tg-gutter: 24px;

  /* No drop shadows on dark — depth is surface lightness, not shadow.
     A shadow on a near-black ground just makes mud.                     */
}

/* ---- base ----------------------------------------------------------- */
body {
  background: var(--tg-graphite);
  color: var(--tg-bone);
  font-family: var(--tg-font-body);
  font-size: var(--tg-t-body);
  line-height: var(--tg-lh-body);
}

h1, h2, h3, h4, .tg-display {
  font-family: var(--tg-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tg-track-display);
  line-height: var(--tg-lh-head);
}

p { max-width: var(--tg-measure); }

/* ash fails contrast for body text at 16px — labels and borders only */
.tg-muted { color: var(--tg-ash); font-size: var(--tg-t-sm); }

a { color: var(--tg-blaze); }
a:hover { color: var(--tg-blaze-hover); }
:focus-visible { outline: 2px solid var(--tg-blaze); outline-offset: 2px; }

/* ---- buttons — ONE primary per view --------------------------------- */
.tg-btn {
  font-family: var(--tg-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tg-track-display);
  border-radius: var(--tg-radius);
  padding: 14px 24px;
  display: inline-block;
  border: var(--tg-border-w) solid transparent;
  cursor: pointer;
}
.tg-btn--primary   { background: var(--tg-blaze); color: var(--tg-graphite); }
.tg-btn--secondary { background: transparent; color: var(--tg-blaze);
                     border-color: var(--tg-blaze); }
.tg-btn--tertiary  { background: none; padding: 0; color: var(--tg-blaze);
                     text-decoration: underline;
                     text-decoration-color: color-mix(in srgb, var(--tg-blaze) 40%, transparent); }
.tg-btn--tertiary:hover { text-decoration-color: var(--tg-blaze); }

/* ---- surfaces ------------------------------------------------------- */
.tg-panel { background: var(--tg-steel); border-radius: var(--tg-radius); padding: var(--tg-5); }
.tg-panel--raised { background: var(--tg-surface-raised); }

/* ---- spec table — where credibility lives --------------------------- */
.tg-spec { width: 100%; border-collapse: collapse; font-size: var(--tg-t-sm); }
.tg-spec th { text-align: left;  color: var(--tg-ash); font-weight: 500; padding: var(--tg-3); }
.tg-spec td { text-align: right; font-family: var(--tg-font-mono);
              letter-spacing: var(--tg-track-mono); padding: var(--tg-3); }
.tg-spec tr:nth-child(odd) { background: var(--tg-steel); }

/* ---- trust bar — the claim nobody else makes ------------------------ */
.tg-trustbar {
  background: var(--tg-steel); color: var(--tg-ash);
  font-size: var(--tg-t-xs); padding: var(--tg-2) var(--tg-4);
  display: flex; gap: var(--tg-5); justify-content: center; flex-wrap: wrap;
}

@media (max-width: 768px) {
  :root { --tg-t-hero: 2.5rem; --tg-t-h1: 2rem; --tg-t-h2: 1.6rem; --tg-gutter: 16px; }
}