/*
 * ============================================================
 *  BREW GOOD — BASE STYLES
 *  styles/base.css
 * ============================================================
 *  Resets, document defaults, and body-level typography.
 *  No component-specific rules here — those live in
 *  components.css.
 * ============================================================
 */

/* ── Box model reset ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Document ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

/* ── Element defaults ─────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* ── Responsive padding ───────────────────────────────────── */
/*
  All full-width sections use var(--page-padding) for horizontal
  padding, so changing the variable here adjusts every section
  at once without touching component rules.
*/
.section-pad {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

@media (max-width: 1024px) {
  :root { --page-padding: 40px; }
}

@media (max-width: 768px) {
  :root { --page-padding: 24px; }
}

/* ── Utility: mono label ──────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Utility: visibility ──────────────────────────────────── */
.is-hidden { display: none !important; }

/* ── Utility: colour modifier classes ────────────────────── */
/*
  Used to avoid inline style= attributes on elements that only
  need a colour override. Prefix: .c- (colour).
*/
.c-yellow  { color: var(--color-yellow); }
.c-cobalt  { color: var(--color-cobalt); }
.c-sage    { color: var(--color-sage); }
.c-cream   { color: var(--color-text-inv); }
.c-coral   { color: var(--color-coral); }

/* ── Utility: image placeholder ──────────────────────────── */
/*
  Visible only when a real <img> hasn't been dropped in yet.
  Remove .placeholder from the element once you have the photo.
*/
.placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-line-subtle) 0 1px,
    transparent 1px 14px
  );
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.placeholder.on-dark {
  border-color: var(--color-line-inv);
  color: var(--color-text-inv);
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-line-inv-subtle) 0 1px,
    transparent 1px 14px
  );
}