/* =========================================================================
   KHASHAB / design tokens
   Brand book: Oxblood #440300 · Walnut #795A45 · Cream #FFF5E1 · Espresso #2D2722
   Display: Boska (stand-in for the brand's Fasmey) · Text: Montserrat
   ========================================================================= */

@font-face { font-family: "Boska"; src: url("../fonts/boska-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../fonts/boska-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../fonts/boska-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../fonts/boska-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900; 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+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 */
  --oxblood:      #440300;
  --walnut:       #795A45;
  --cream:        #FFF5E1;
  --espresso:     #2D2722;

  /* derived, never new hues: tints and shades of the four brand colours */
  --oxblood-deep: #2A0200;   /* pressed state */
  --paper:        #FFF5E1;   /* page */
  --paper-2:      #F5E8CF;   /* alternate panel, one step into walnut */
  --night:        #1F1A16;   /* deepest espresso, behind film */
  --walnut-soft:  #C9AC92;   /* walnut on espresso: 7.4:1 on --espresso */
  --ink:          #2D2722;   /* body text on paper: 13.2:1 */
  --ink-2:        #6A4E3B;   /* secondary text on paper: 6.4:1 */
  --rule:         rgba(121, 90, 69, .28);
  --rule-dark:    rgba(255, 245, 225, .16);

  /* semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--oxblood);
  --focus: #B0682D;          /* warm amber ring: visible on cream and espresso */

  /* type */
  --f-display: "Boska", "Times New Roman", serif;
  --f-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero: clamp(3.1rem, 1.6rem + 6.2vw, 8.4rem);    /* hero only */
  --t-1:    clamp(2.5rem, 1.5rem + 4.2vw, 5.6rem);
  --t-2:    clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  --t-3:    clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --t-lead: clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .72rem;         /* tracked caps, echoes "FURNITURE" in the lockup */
  --track-label: .32em;

  /* space: 8pt rhythm, fluid at the top end */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4.5rem; --s-7: clamp(5rem, 3rem + 7vw, 9rem); --s-8: clamp(7rem, 4rem + 10vw, 14rem);
  --gutter: clamp(1.25rem, .6rem + 3.2vw, 4.5rem);
  --maxw: 1520px;

  /* joinery: the 3mm shadow gap between flush panels, used as the divider language */
  --gap-line: linear-gradient(90deg, transparent, rgba(0,0,0,.28) 12%, rgba(0,0,0,.28) 88%, transparent);

  /* motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);      /* expo out: entrances */
  --ease-in:   cubic-bezier(.7, 0, .84, 0);      /* exits */
  --ease-door: cubic-bezier(.76, 0, .2, 1);      /* heavy door swing */
  --d-fast: .2s; --d-base: .45s; --d-slow: .9s;

  /* layers */
  --z-header: 50; --z-menu: 60; --z-loader: 100;

  --header-h: 84px;
}

@media (max-width: 899.98px) {
  :root { --header-h: 68px; }
}