/* Militant Goose Developers — brand layer. Pack 1.2.0.
   Tokens plus the .mgd- component system. Reference this file; do not fork it. */
@import "tokens.css";

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

body.mgd {
  margin: 0;
  background: var(--mgd-ground);
  color: var(--mgd-ink);
  font-family: var(--mgd-font);
  font-size: var(--mgd-size-body);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mgd-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--mgd-red); }
::selection { background: var(--mgd-red); color: var(--mgd-ground); }
:focus-visible { outline: var(--mgd-rule) solid var(--mgd-red); outline-offset: 2px; }

/* Type */
.mgd-display { font-size: var(--mgd-size-display); font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1; margin: 0; }
.mgd-h1 { font-size: var(--mgd-size-h1); font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1.05; margin: 0; }
.mgd-h2 { font-size: var(--mgd-size-h2); font-weight: 700; letter-spacing: var(--mgd-track-h2); line-height: 1.15; margin: 0; }
.mgd-h3 { font-size: var(--mgd-size-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.mgd-label { font-size: var(--mgd-size-label); font-weight: 600; letter-spacing: var(--mgd-track-label); text-transform: uppercase; color: var(--mgd-muted); }
.mgd-on-ink .mgd-label, .mgd-label--on-ink { color: var(--mgd-muted-on-ink); }

/* Grounds.
   The body.mgd base rule above is (0,1,1), so a bare .mgd-on-ink at (0,1,0) can
   never beat it on a body element and no source order fixes that. The body-scoped
   pairs below are what make a dark page possible for a consumer. Do not remove
   them and do not "simplify" them back to the single-class form. */
.mgd-on-ink { background: var(--mgd-ink); color: var(--mgd-ground); }
.mgd-on-red { background: var(--mgd-red); color: var(--mgd-ground); }
body.mgd.mgd-on-ink { background: var(--mgd-ink); color: var(--mgd-ground); }
body.mgd.mgd-on-red { background: var(--mgd-red); color: var(--mgd-ground); }
.mgd-on-ink a, .mgd-on-red a { color: var(--mgd-ground); }
.mgd-on-ink a:hover { color: var(--mgd-red); }
.mgd-on-red a:hover { color: var(--mgd-ink); }
.mgd-surface { background: var(--mgd-white); border: var(--mgd-rule) solid var(--mgd-ink); }

/* Rules */
.mgd-rule { height: var(--mgd-rule); background: var(--mgd-ink); border: 0; margin: 0; }
.mgd-rule--on-ink { background: var(--mgd-ground); }

/* The prompt lockup */
.mgd-lockup { display: flex; align-items: center; gap: 0.22em; font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1; }
.mgd-lockup__prompt { color: var(--mgd-red); }
.mgd-lockup__word { color: currentColor; }
.mgd-lockup__cursor { display: inline-block; width: 0.36em; height: 0.8em; background: var(--mgd-red); }
.mgd-lockup--sm { font-size: 24px; }
.mgd-lockup--md { font-size: 40px; }
.mgd-lockup--lg { font-size: var(--mgd-size-display); }

/* Actions */
.mgd-btn {
  display: inline-flex; align-items: center; gap: var(--mgd-space-2);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--mgd-space-3) var(--mgd-space-4);
  border: var(--mgd-rule) solid var(--mgd-ink); border-radius: var(--mgd-radius);
  text-decoration: none; cursor: pointer; text-align: left;
}
.mgd-btn--primary { background: var(--mgd-red); border-color: var(--mgd-red); color: var(--mgd-ground); }
.mgd-btn--primary:hover { background: var(--mgd-red-600); border-color: var(--mgd-red-600); color: var(--mgd-ground); }
.mgd-btn--primary:active { background: var(--mgd-red-700); border-color: var(--mgd-red-700); }
.mgd-btn--secondary { background: transparent; color: var(--mgd-ink); }
.mgd-btn--secondary:hover { background: var(--mgd-ink); color: var(--mgd-ground); }

/* Cards */
.mgd-card { background: var(--mgd-white); border: var(--mgd-rule) solid var(--mgd-ink); padding: var(--mgd-space-5); display: flex; flex-direction: column; gap: var(--mgd-space-3); }
.mgd-card__kicker { font-size: var(--mgd-size-label); font-weight: 600; letter-spacing: var(--mgd-track-label); text-transform: uppercase; color: var(--mgd-muted); }

/* Grid */
.mgd-grid { display: grid; gap: var(--mgd-rule); background: var(--mgd-ink); }
.mgd-grid > * { background: var(--mgd-ground); }

/* Centred composition.
   Scoped opt-in, not a default: see composition.centredException in brand.json.
   Put .mgd-centred on the page's band containers, not on <body>, so a page
   cannot end up half-centred. A centred row must be a stack: this deliberately
   does NOT centre a multi-column grid in place. */
.mgd-centred { justify-items: center; text-align: center; }
.mgd-centred.mgd-stack { display: grid; }
.mgd-centred .mgd-measure { max-width: 54ch; }
.mgd-centred .mgd-btn { text-align: left; }