/* ============================================================
   Atelier Car Care — Global Stylesheet
   Typography foundation: font faces, custom properties,
   base body and heading rules.
   ============================================================ */

/* ── Font Faces ── */

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms';
  src: url('/fonts/TTNorms-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── Custom Properties ── */

:root {
  --teal: #3f8e90;
  --teal-rgba: rgba(63, 142, 144, 0.2);
  --white: #ffffff;
  --off-white: #b8b8b8;
  --body-copy-size: 16px;
  --body-copy-tracking: 2px;
  --header-h: 80px;
}

/* ── Reset ── */

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

/* ── Base Body ── */

body {
  font-family: 'TT Norms', sans-serif;
  font-size: var(--body-copy-size);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── Heading Weights ──
   Explicit declarations prevent reliance on browser UA defaults.
   H1, H2 — bold. H3, H4 — regular (one step above body light).
   ── */

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 400; }
h4 { font-weight: 400; }

/* ── Eyebrow Labels ──
   Small teal uppercase tracking labels used as section/page context.
   All eyebrow variants share this base. Page-specific display or
   margin overrides are applied via the individual class rules below.
   ── */

.hero-eyebrow,
.about-eyebrow,
.section-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-block;
  margin-bottom: 18px;
}

.about-eyebrow {
  display: block;
  margin-bottom: 28px;
}