/* ============================================================
   BURJ QUAID — Design tokens
   Single source of truth. Every spacing value, font-size and
   colour on the page must reference a token from this file.
   No raw px in component CSS. No new fonts, colours or gradients.
   ============================================================ */

/* ---- Fonts (self-referenced via @font-face-less Google import in HTML) ---- */
/* Fraunces  -> display / headings
   Archivo   -> body / UI
   Space Grotesk -> stats, eyebrows, numeric accents             */

/* ---------- Self-hosted fonts (no third-party CDN) ---------- */
/* Fraunces / Fraunces-italic are variable (wght axis) — one face
   each covers 400 & 500. Archivo ships static per weight.        */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/grotesk.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {

  /* ---------- COLOUR (flat only, no gradients) ---------- */
  --c-champagne:   #AD9C77;   /* accent / lines / CTA */
  --c-pine:        #103D38;   /* deep brand green */
  --c-ink:         #0B0F0E;   /* near-black */

  /* tints derived by opacity only, never new hues */
  --c-paper:       #F7F4EE;   /* warm off-white page bg */
  --c-paper-2:     #EFE9DE;   /* subtle alt section bg */
  --c-line:        rgba(11, 15, 14, 0.14);   /* hairline on light */
  --c-line-strong: rgba(11, 15, 14, 0.26);
  --c-line-inv:    rgba(247, 244, 238, 0.20);/* hairline on dark  */
  --c-champagne-line: rgba(173, 156, 119, 0.45);

  --c-text:        #0B0F0E;
  --c-text-muted:  rgba(11, 15, 14, 0.66);
  --c-text-inv:    #F7F4EE;
  --c-text-inv-muted: rgba(247, 244, 238, 0.72);

  /* semantic surfaces */
  --surface-page:  var(--c-paper);
  --surface-alt:   var(--c-paper-2);
  --surface-dark:  var(--c-pine);
  --surface-ink:   var(--c-ink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE (fluid, clamp = min / vw / max) ---------- */
  --fs-eyebrow: 0.78rem;     /* tracked small caps */
  --fs-sm:      0.9rem;
  --fs-body:    1.02rem;
  --fs-lead:    clamp(1.12rem, 0.9rem + 0.9vw, 1.35rem);
  --fs-h4:      clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem);
  --fs-stat:    clamp(2.2rem, 1.4rem + 3vw, 3.6rem);

  --lh-tight:   1.05;
  --lh-snug:    1.22;
  --lh-body:    1.62;
  --tracking-caps: 0.18em;
  --tracking-wide: 0.06em;

  /* ---------- SPACING SCALE (8pt-ish, tokenised) ---------- */
  --sp-0:   0;
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   2.75rem;
  --sp-8:   3.5rem;
  --sp-9:   4.5rem;
  --sp-10:  6rem;
  --sp-12:  8rem;

  /* one rhythm for every <section> */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* layout */
  --container:      1240px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* radii — restrained, hairline aesthetic */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;

  /* borders */
  --hair: 1px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;

  /* elevation — used sparingly, flat design */
  --z-header: 50;
  --z-overlay: 40;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}