/* ==========================================================================
   HEARTHS POINT — DESIGN TOKENS
   Colours sampled from the fireplace photograph. Change a value here and it
   updates everywhere.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Colour ---------------------------------------------------------------- */
  --ink:        #0E0C0A;   /* page background, warm near-black      */
  --charcoal:   #17140F;   /* alternate bands                        */
  --soot:       #221D17;   /* media backgrounds, surfaces            */
  --stone:      #8A877E;   /* muted details                          */
  --wood:       #5A3521;   /* deep accent                            */
  --bronze:     #B08E5E;   /* labels, links, hover hairlines         */
  --ember:      #D9772B;   /* focus rings and tiny accents only      */
  --parchment:  #ECE3D0;   /* headings, primary text                 */
  --ash:        #B8AE9C;   /* secondary text                         */

  --line:        rgb(236 227 208 / 0.12);  /* hairlines              */
  --line-strong: rgb(236 227 208 / 0.22);
  --ink-glass:   rgb(14 12 10 / 0.84);     /* scrolled navigation    */

  /* Type ------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-label: 0.75rem;                                        /* tracked caps     */
  --text-small: 0.875rem;
  --text-body:  clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);     /* serif body       */
  --text-lede:  clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --text-tile:  clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem);    /* tile titles      */
  --text-h2:    clamp(1.875rem, 1.5rem + 1.3vw, 2.75rem);       /* section headings */
  --text-h1:    clamp(2.75rem, 1.9rem + 3.4vw, 5rem);           /* page titles      */
  --text-hero:  clamp(3.25rem, 2rem + 4.6vw, 6.5rem);           /* homepage hero    */

  --tracking-label: 0.22em;
  --tracking-wordmark: 0.34em;

  /* Space (4px base) ------------------------------------------------------ */
  --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: 4rem;     --space-9: 6rem;   --space-10: 8rem;

  --section-gap: clamp(4.5rem, 3rem + 5vw, 8rem);   /* between library sections */
  --grid-col-gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  --grid-row-gap: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);

  /* Layout ---------------------------------------------------------------- */
  --max-width: 1440px;
  --gutter: clamp(1rem, 0.2rem + 3.6vw, 3.5rem);
  --header-h: 76px;
  --header-h-scrolled: 60px;
  --radius: 2px;

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
  --dur-slow: 600ms;
}