/**
 * css/global.css — Site-wide base styles
 *
 * Every page on the site links to this file.
 * It imports design tokens from variables.css and sets the
 * non-negotiable base rules: font, font-size, headings.
 *
 * DO NOT add breakpoints that change font-size or font-family here.
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */
@import './variables.css';

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

/* ── Base ─────────────────────────────────────────────────────────────────── */

/*
 * html font-size is the root em — never change it.
 * All rem values on the site are relative to this 16px anchor.
 */
html {
  font-size: 16px;
}

body {
  font-family: var(--bh-font-body);
  font-size: 1rem;          /* 16px — anchored, never overridden by breakpoints */
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
/*
 * Font family, weight, and transform are set once here.
 * Sizes follow a modular scale (1.25 ratio) anchored at 1rem = 16px.
 * Override individual sizes in page/component CSS as needed — but never
 * change font-family or font-weight; those are non-negotiable brand rules.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bh-font-heading);
  font-weight: 400;           /* Anton is display-weight at any weight value */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: 3rem; }      /* 48px */
h2 { font-size: 2.25rem; }   /* 36px */
h3 { font-size: 1.75rem; }   /* 28px */
h4 { font-size: 1.375rem; }  /* 22px */
h5 { font-size: 1.125rem; }  /* 18px */
h6 { font-size: 0.875rem; }  /* 14px — label-level heading */

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Images ───────────────────────────────────────────────────────────────── */
img, video {
  max-width: 100%;
  display: block;
}