/*
  Mesh & Ink — design tokens for Leo Invisible Grills.
  Single light theme by design: a conversion-focused local-service
  site has no need for a dark mode toggle, so these are the only values.
*/

/*
  SELF-HOSTED FONTS.
  These were loading from Google's CDN, which costs a render-blocking
  stylesheet request to a third party plus two cross-origin connections
  before a single glyph can be fetched. They are now served from this domain.

  Two files, not the seven the previous scaffold assumed: Google serves one
  VARIABLE woff2 per family covering every weight, and these are exactly the
  latin-subset files the browser was already downloading. Hence the weight
  RANGES below — one face per family, not one per weight.

  font-display: swap keeps text visible in the fallback while the webfont
  loads, so a slow font never blocks the copy from being read.

  To update: re-download from the same Google CSS URL (the version hash in
  the path changes when Google revises the family) and replace the files.
*/
@font-face {
  font-family: "Archivo";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Brand colors */
  --ink: #16232e;
  --steel: #47606e;
  --steel-soft: rgba(71, 96, 110, 0.35);
  --kiln: #d98a34;
  --kiln-deep: #c17f35; /* darkened kiln for hover states — kept light enough that ink text on it still clears 4.5:1 */
  --ink-deep: #0c161e; /* darker than --ink; only used for the homepage hero carousel's full-bleed background depth */
  --whatsapp: #25d366;
  --success: #2e7d4f;
  --error: #b3402a;

  /* Semantic surface colors */
  --bg: #efede7;
  --surface: #fbfaf7;
  --surface-2: #f4f2ec;
  --text: #16232e;
  --text-muted: #47606e;
  --border: #dedad1;
  --focus-ring: #d98a34;

  /* Type */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;

  --container: 1180px;

  /* Fallback before assets/js/main.js measures the real header height on
     load; kept close enough that the correction isn't a visible jump. */
  --header-h: 72px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}