/* Base styles: reset, typography, layout helpers, header, footer.
   Only var() references from tokens.css. No raw colours here. */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }
button, input { font: inherit; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
p { line-height: var(--lh-body); }
strong, b { font-weight: var(--fw-bold); }

/* Links */
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--radius-sm); }
.link-bold { font-family: var(--font-body); font-weight: var(--fw-bold); text-decoration: none; }
.link-bold:hover { text-decoration: underline; }

/* Buttons */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.button:hover { background: var(--color-grey-dark); text-decoration: none; }

/* Layout helpers */
.container {
  width: 100%;
  max-width: calc(var(--container-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.section { position: relative; width: 100%; overflow: hidden; }
.section--full { min-height: var(--section-min-h); }
.section--orange { background: var(--color-orange); }
.section--black { background: var(--color-black); color: var(--color-white); }
.section--yellow { background: var(--color-yellow); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--bistro { background: var(--gradient-bistro); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* Header */
.site-header {
  background: var(--color-orange);
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--gutter) 0;
}
.site-header__logo { display: block; width: min(560px, 82vw); }
.site-header__logo img { width: 100%; }

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  padding: var(--space-7) var(--gutter);
}
.site-footer__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__logo { width: 92px; flex: none; }
.site-footer address { font-style: normal; }
.site-footer__gap { display: block; height: var(--space-3); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.site-footer__legal a { font-weight: var(--fw-semibold); }
.site-footer__legal--minor a { font-size: var(--fs-xs); opacity: 0.8; }

@media (max-width: 768px) {
  .site-footer { padding: var(--space-7) var(--gutter); }
  .site-footer__inner { flex-direction: column; text-align: center; gap: var(--space-4); }
  .site-footer__legal { justify-content: center; }
}