/* ---- tokens -------------------------------------------------------------
   FIREPLACEHUB - "Black and Tan"

   WHY NOT THE BRIEF'S CONFIRMED PALETTE
   The handoff confirmed cream #F3EEE6 / travertine #E3D8C4 / warm charcoal
   with a clay accent. Built out, that is the single most over-produced
   premium-consumer palette there is: warm paper ground, clay or brass
   accent, espresso text. Every artisan-cookware and heritage-craft site
   ships it, so the brand disappears into the category instead of standing
   out of it. The first build proved the point.

   WHAT REPLACED IT
   Neutral off-black ground (not warm espresso, which is the same cliche a
   shade darker), warm bone and tan carrying the type, and one saturated
   vermilion rationed to almost nothing. Three reasons it is right here:
     1. every product photograph is a warm interior with a black sculptural
        body and live flame. On off-black the photographs become the only
        light in the page, which is what a fireplace actually does to a room;
     2. the FH monogram is a high-contrast black-and-white mark. The brief
        had to quarantine it on its own dark tile to stop it fighting the
        cream. On this ground it simply is the brand, no containment needed;
     3. the accent is deliberately hotter and cleaner than the flame tones in
        the photography. A clay accent sinks into the pictures; vermilion
        stays legible as interface and never reads as decoration.

   One theme, whole page. No section inverts.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* --- ground ----------------------------------------------------------- */
  --void:     #0C0C0D;   /* page. neutral, NOT warm near-black */
  --raise:    #131315;   /* one step up: card surfaces */
  --raise-2:  #1A1A1D;   /* image wells before load */

  /* --- type ------------------------------------------------------------- */
  --bone:      #EDE8E0;  /* primary */
  --bone-soft: #A9A399;  /* secondary */
  /* Tertiary carries the mono furniture, which runs at 11px. Measured at
     4.8:1 on both grounds, so it clears AA at that size rather than only
     looking quiet. */
  --bone-dim:  #878178;
  --tan:       #D9C3A5;  /* the warm half of black-and-tan */

  /* --- the one accent, rationed ----------------------------------------- */
  --pop:      #FF5A1F;
  --pop-deep: #D63F0C;   /* pressed */

  /* --- rules ------------------------------------------------------------ */
  --line:      rgba(237, 232, 224, 0.14);
  --line-soft: rgba(237, 232, 224, 0.07);

  --focus: var(--pop);

  /* --- typography --------------------------------------------------------
     Petrona across display and body: one serif family covering a 10px label
     and a poster headline, chosen against a Rumblez specimen for the same
     bracketed wedge serifs, high x-height and slightly condensed, warm cut.
     Rumblez itself is a commercial licence and is not bundled here.

     Note it has weight and italic axes but NO width axis, unlike the Archivo
     it replaced, so any `font-variation-settings: "wdth"` is dead weight.
     Geist Mono for numerals and micro-furniture only, kept sans on purpose:
     an all-serif page loses the contrast that makes the small labels read as
     furniture rather than as copy. */
  --text: "Petrona", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Logotype only: the hero mark, the nav mark, the footer mark. Wherever the
     brand name is set as a mark it uses this and nothing else, so the name
     never appears in two different faces on one screen. Never used for copy. */
  --mark: "Bodoni Moda", "Didot", "Times New Roman", serif;

  /* Capped so the five-word hero headline lands on two lines at desktop
     rather than three. Font scale is planned around the picture beside it,
     not set as large as the column will take. */
  --fs-mega: clamp(2.5rem, 1.1rem + 5.1vw, 5.5rem);
  --fs-h2:   clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --fs-h3:   clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.8125rem;
  --fs-micro: 0.6875rem;

  --track-micro: 0.15em;
  /* Eased from -.03em. That suited a grotesque; a serif of this cut is already
     narrow and its bracketed serifs need the room to stay distinct at size. */
  --track-tight: -0.016em;

  /* --- rhythm ----------------------------------------------------------- */
  --gut:   clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --shell: 88rem;
  /* Both neighbours contribute, so the gap between two sections is twice this.
     Measured at 1600px the old curve resolved to 160px a side: 320px of empty
     ground between the cards and the section under them, which on an unbroken
     dark page reads as the page having ended. The floor is unchanged (phones
     were already right at 68px); only the desktop rate and ceiling come down,
     to about 104px a side at 1600. */
  --sec-y: clamp(4.25rem, 2.5rem + 4vw, 7rem);
  --nav-h: 68px;
  --measure: 34rem;

  /* --- shape ---------------------------------------------------------------
     Radius 0 everywhere, buttons included. Sharp corners read architectural
     and are the opposite of the pill-and-rounded-card default. */
  --r: 0px;

  --dur-1: 0.3s;
  --dur-2: 0.6s;
  --dur-3: 1s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-grain: 5;
  --z-nav:   100;
  --z-cta:   110;
}