/* ─────────────────────────────────────────────────────────────────────────
   Shieldworks — design tokens
   Generated from shieldworks-design-system.md. Single source of truth for
   the child theme. Do not hardcode a colour or a size anywhere else.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ---- colour ------------------------------------------------------- */
  --sw-asphalt:  #16181C;   /* page ground, footer — dominant            */
  --sw-slate:    #2A2F36;   /* cards, panels, raised surfaces — ~25%     */
  --sw-grit:     #5A6068;   /* borders, dividers, muted labels           */
  --sw-salt:     #E8EAE6;   /* primary text, logo on dark — dominant     */
  --sw-glacier:  #7FA8C9;   /* THE accent. links, focus, primary button  */
  --sw-hazard:   #E8A33D;   /* warnings only. never decorative           */
  --sw-ok:       #6B9E78;
  --sw-err:      #C9615B;

  /* Budgets are not enforceable in CSS, so they live here as a reminder:
     glacier <= 8% of any screen. hazard <= 2%, warnings only.
     No #000, no #fff anywhere in this project.                          */

  --sw-glacier-hover: color-mix(in srgb, var(--sw-glacier) 82%, white);
  --sw-border:        color-mix(in srgb, var(--sw-grit) 35%, transparent);
  --sw-surface-raised: color-mix(in srgb, var(--sw-slate) 88%, white);

  /* ---- type --------------------------------------------------------- */
  --sw-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sw-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --sw-font-mono:    "JetBrains Mono", ui-monospace, monospace;

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

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

  /* Condensed uppercase is unreadable without tracking. This is the
     wordmark's own value — keep them identical.                         */
  --sw-track-display: 0.055em;
  --sw-track-mono:   -0.01em;

  --sw-measure: 68ch;

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

  /* ---- form --------------------------------------------------------- */
  --sw-radius: 2px;        /* machined, not soft. do not raise this      */
  --sw-border-w: 1px;
  --sw-maxw: 1280px;
  --sw-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(--sw-asphalt);
  color: var(--sw-salt);
  font-family: var(--sw-font-body);
  font-size: var(--sw-t-body);
  line-height: var(--sw-lh-body);
}

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

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

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

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

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

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

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

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

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