/* ==========================================================================
   Spack Machine — Design System tokens (ZeroY machine page = source of truth)
   Sole token source for GeneratePress child theme.
   Fonts: Inter (body) + Outfit (display). Loaded by functions.php.
   ========================================================================== */

/* ---------- 1. Tokens (aligned to Rotary ZeroY machine page) ---------- */
:root{
  /* ZeroY short names */
  --paper:#fafaf7;
  --tint:#f1efe9;
  --white:#ffffff;
  --ink:#191a1c;
  --ink-2:#3f4145;
  --muted:#5c5e63;
  --line:#e3e0d7;
  --line-strong:#cfccc2;
  --red:#e30613;
  --red-dark:#b00410;
  --red-press:#8d030d;
  --graphite:#131316;
  --graphite-2:#1d1d21;
  --graphite-3:#2a2a2f;
  --grey-on-dark:#a8a9ae;

  /* Canonical --color-* (chrome + older CSS) */
  --color-brand:var(--red);
  --color-brand-strong:var(--red-dark);
  --color-ink:var(--ink);
  --color-on-dark:#f2f2f4;
  --color-canvas:var(--paper);
  --color-surface:var(--tint);
  --color-surface-dark:var(--graphite);
  --color-surface-dark-raised:var(--graphite-2);
  --color-ink-muted:var(--muted);
  --color-on-dark-muted:var(--grey-on-dark);
  --color-border:var(--line);
  --color-border-dark:rgba(255,255,255,.14);
  --color-brand-on-dark:#ff4654;
  --color-focus:var(--red);
  --color-focus-on-dark:#ff4654;
  --color-error:var(--red-dark);

  /* type */
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Outfit","Inter",system-ui,sans-serif;
  --text-display:clamp(2.5rem,1.5rem + 3.6vw,4rem);
  --text-h2:clamp(1.625rem,1.25rem + 1.4vw,2.375rem);
  --text-h3:clamp(1.125rem,1.05rem + .4vw,1.375rem);
  --text-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --text-body:1rem;
  --text-small:.875rem;
  --text-caption:.75rem;
  --tracking-eyebrow:.14em;
  --tracking-label:.08em;

  /* layout — machine .wrap = 1240px */
  --container:1240px;
  --container-narrow:52rem;
  --measure:68ch;
  --gutter:clamp(1.125rem,.75rem + 1.5vw,1.5rem);
  --header-h:80px;
  --anchor:calc(var(--header-h) + 24px);
  --space-section:clamp(4rem,2.5rem + 4vw,5.5rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:2rem;  --space-6:3rem; --space-7:4rem;  --space-8:6rem;
  --space-gutter-grid:2rem;

  /* shape — near-square ZeroY (not soft card UI) */
  --radius-s:0;
  --radius-m:0;
  --radius-l:2px;
  --shadow-card:none;
  --shadow-pop:0 12px 30px rgba(18,21,25,.07);
  --motion-fast:150ms;
  --motion-med:250ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  --texture-grid-light:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23191a1c' stroke-opacity='.03'/%3E%3C/svg%3E");
  --texture-grid-dark:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23FFFFFF' stroke-opacity='.03'/%3E%3C/svg%3E");

  /* Compat aliases */
  --edge:var(--gutter);
  --color-surface-02:var(--color-surface);
  --color-gray-10:#ebebeb;
  --color-gray-30:#c4c4c4;
  --color-gray-45:#a0a0a0;
  --color-gray-55:#8a8a8a;
  --color-gray-70:#5c5c5c;
  --color-gray-85:#2e2e2e;
  --font-mono:var(--font-body);
  --text-mono:var(--text-caption);
  --tracking-mono:var(--tracking-label);
  --radius:var(--radius-m);
}
@media (max-width:900px){ :root{ --header-h:64px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.6;
  color:var(--color-ink);
  background:var(--color-canvas);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:var(--font-display);color:inherit;margin:0;letter-spacing:-.01em}
h1,.h1{font-size:var(--text-display);line-height:1.05;font-weight:800}
h2,.h2{font-size:var(--text-h2);line-height:1.12;font-weight:800}
h3,.h3{font-size:var(--text-h3);line-height:1.3;font-weight:600}
.lead{font-size:var(--text-lead);line-height:1.55;color:var(--color-ink-muted);max-width:var(--measure)}
.small{font-size:var(--text-small);line-height:1.55}
.caption{font-size:var(--text-caption);line-height:1.4}
.mono{
  font-family:var(--font-body);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  font-weight:600;
}
.eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  color:var(--color-brand);
  margin:0 0 10px;
}
::selection{background:var(--color-brand);color:#fff}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}

/* ---------- 3. Layout shells ---------- */
.container,.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--edge);
}
.section,.band{
  padding-block:var(--space-section);
  background:var(--color-canvas);
  color:var(--color-ink);
}
.section--alt,.band--alt,.section--surface{background:var(--color-surface)}
.section--dark,.band--dark{
  background:var(--color-surface-dark);
  color:var(--color-on-dark);
}
.section--dark .lead,.band--dark .lead{color:var(--color-on-dark-muted)}
.section--dark .eyebrow{color:var(--color-brand)}
.section--cta,.band.cta{
  background:var(--color-surface-dark-raised);
  color:var(--color-on-dark);
  border-top:2px solid var(--color-brand);
}
.texture-grid{background-image:var(--texture-grid-light);background-size:40px 40px}
.section--dark.texture-grid,.texture-grid--dark{background-image:var(--texture-grid-dark);background-size:40px 40px}
.grid-2,.grid-3{display:grid;gap:var(--space-3)}
@media(min-width:720px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 4. Buttons (ZeroY square) ----------
   Every variant declares rest / hover+focus / active, and colour is the only
   thing that moves — no scale or shadow (that was DS v0).
   `a.btn` is repeated on each state so container-level link resets such as
   `.spack-machine a{color:inherit}` cannot outweigh the label colour. */
.btn,a.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  background:var(--color-brand);
  color:#fff;
  transition:background-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease);
}

/* red = primary, also the bare `.btn` default */
.btn,a.btn,.btn--red,a.btn--red{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
.btn:hover,a.btn:hover,.btn--red:hover,a.btn--red:hover,
.btn:focus-visible,a.btn:focus-visible,.btn--red:focus-visible,a.btn--red:focus-visible{
  background:var(--color-brand-strong);border-color:var(--color-brand-strong);color:#fff;transform:none
}
.btn:active,a.btn:active,.btn--red:active,a.btn--red:active{
  background:var(--red-press);border-color:var(--red-press);color:#fff
}
/* box-shadow:none drops the legacy blue focus glow from main.css. */
.btn:focus-visible,a.btn:focus-visible,.btn--red:focus-visible,a.btn--red:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:none}

/* ghost = secondary on paper; hover inverts to ink */
.btn--ghost,a.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--line-strong)}
.btn--ghost:hover,a.btn--ghost:hover,
.btn--ghost:focus-visible,a.btn--ghost:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost:active,a.btn--ghost:active{background:var(--graphite-3);border-color:var(--graphite-3);color:#fff}
.btn--ghost:focus-visible,a.btn--ghost:focus-visible{outline:3px solid var(--red);outline-offset:2px;box-shadow:none}

/* onblack = secondary on graphite bands; hover inverts to paper */
.btn--onblack,a.btn--onblack{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--onblack:hover,a.btn--onblack:hover,
.btn--onblack:focus-visible,a.btn--onblack:focus-visible{background:#fff;border-color:#fff;color:var(--color-ink)}
.btn--onblack:active,a.btn--onblack:active{background:var(--tint);border-color:var(--tint);color:var(--color-ink)}
.btn--onblack:focus-visible,a.btn--onblack:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:none}

.btn[disabled],.btn.is-disabled,a.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn--sm{padding:9px 18px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

/* ---------- 5. Cards / table / meta (compat) ---------- */
.card{
  border:1px solid var(--color-border);
  background:var(--white);
  padding:1.5rem;
  border-radius:0;
  box-shadow:none;
}
.card h3{margin:0 0 .75rem}
.card p{margin:0;font-size:.875rem;color:var(--color-ink-muted);line-height:1.6}
.table-wrap{border:1px solid var(--color-border);overflow-x:auto}
table.spack-spec{width:100%;border-collapse:collapse;min-width:44rem}
table.spack-spec caption{
  text-align:left;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);
  background:var(--color-surface);font-family:var(--font-display);font-size:.75rem;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-ink-muted);font-weight:600;
}
table.spack-spec thead th{
  background:var(--color-ink);color:#fff;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:.75rem;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  padding:.875rem 1.25rem;border-right:1px solid #242424;
}
table.spack-spec tbody th,table.spack-spec tbody td{
  padding:.9375rem 1.25rem;font-size:.875rem;
  border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);
}
table.spack-spec tbody th{text-align:left;font-weight:600}
.meta-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  border-top:1px solid var(--color-border-dark);
}
.meta-strip > div{padding:1.125rem 1.25rem 1.125rem 0;border-right:1px solid rgba(255,255,255,.1)}
.meta-strip dt{
  font-family:var(--font-display);font-size:.6875rem;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--color-gray-55);margin:0 0 .375rem;font-weight:600;
}
.meta-strip dd{
  margin:0;font-family:var(--font-display);font-weight:600;font-size:.875rem;
  color:var(--color-on-dark);
}

/* ---------- 6. Motion ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in,.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
}