/* ============================================================
   MOSAIC KITCHEN - DESIGN TOKENS + WEBFONTS
   Single source of truth for colour, type scale and metrics.
   ============================================================ */

/* ---------- Self-hosted webfonts ---------- */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter ships as a variable font: 400 and 600 are the same file, so one
   @font-face covers both weights and the browser downloads it once. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Palette ---------- */
  --noir: #0E0B09;
  --umber: #3A1C05;
  --copper-deep: #7D3D09;
  --copper: #C8804F;
  --copper-light: #FBB47B;
  --brass: #9B7036;
  --teal: #0C4A44;
  --oxblood: #4A0E17;
  --oxblood-deep: #25050B;
  --cream: #F2E9DE;
  --plaster: #A0978D;

  /* ---------- Type families ---------- */
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", sans-serif;

  /* ---------- Type scale ---------- */
  /* Fallback first for engines without svh, then the real token. */
  --fs-display: clamp(3.5rem, 9.2vw + 0.6rem, 13.5rem);
  --fs-display: min(clamp(3.5rem, 9.2vw + 0.6rem, 13.5rem), 19svh);
  --fs-statement: clamp(2.25rem, 5.6vw + 0.9rem, 8rem);
  --fs-section: clamp(1.75rem, 4vw + 0.6rem, 5.5rem);
  --fs-lede: clamp(1rem, 1.2vw + 0.6rem, 1.5rem);
  --fs-body: clamp(0.95rem, 0.3vw + 0.86rem, 1.125rem);
  --fs-micro: clamp(0.7rem, 0.2vw + 0.65rem, 0.8125rem);

  /* ---------- Metrics ---------- */
  --nav-h: 72px;
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 1240px;
  --radius: 6px;
  /* Vertical beat for the mobile stack, where sections size to their content
     instead of the viewport. Read by css/layout.css and css/sections.css. */
  --pad-section: clamp(4.5rem, 12vw, 7rem);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-reveal: 650ms;
  --dur-line: 700ms;
}

/* ---------- Mobile type scale ---------- */

/* The Anton caps carry the brand, but the desktop curve reads as shouting on a
   phone. Same fluid ramps, started lower - each one is solved so it still
   arrives at the desktop value at the 900px breakpoint, so nothing jumps. */
@media (max-width: 900px) {
  :root {
    --fs-display: clamp(3.25rem, 7.92vw + 1.32rem, 5.775rem);
    --fs-display: min(clamp(3.25rem, 7.92vw + 1.32rem, 5.775rem), 19svh);
    --fs-statement: clamp(2.05rem, 6.27vw + 0.52rem, 4.05rem);
    --fs-section: clamp(1.6rem, 3.92vw + 0.64rem, 2.85rem);
  }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
}