/* rose social. — tokens. Every value the site uses lives here. See DESIGN.md. */

/* Breul Grotesk (paid). Drop the files in /assets/fonts and uncomment — the
   wordmark, prices and numbers already ask for it first.
@font-face {
  font-family: "Breul Grotesk";
  src: url("../assets/fonts/BreulGrotesk-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}
*/
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Expanded-latin.woff2") format("woff2");
  font-weight: 800 900;
  font-stretch: 125%;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../assets/fonts/Aileron-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../assets/fonts/Aileron-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* colour */
  --cream: #FFFDF5;
  --burgundy: #570301;
  --butter: #F7E594;
  --sky: #BAD6FD;
  --cocoa: #654527; /* optional neutral for text only */

  --muted: rgb(87 3 1 / 0.65);          /* muted text on light — never grey */
  --muted-on-dark: rgb(255 253 245 / 0.7);
  --line: var(--burgundy);              /* structural hairline on light */
  --line-soft: rgb(87 3 1 / 0.22);      /* inner hairline (lists, fields) */
  --line-on-dark: rgb(255 253 245 / 0.22);
  --tint: rgb(87 3 1 / 0.06);           /* photo hover overlay */

  /* type */
  --f-serif: "Instrument Serif", "Fraunces", serif;
  --f-mark: "Breul Grotesk", "Archivo", "Unbounded", sans-serif;
  --f-sans: "Aileron", "Inter", sans-serif;

  --t-display: clamp(2.75rem, 5.2vw, 5rem);    /* 44 → 80 */
  --t-h2: clamp(2.25rem, 4.2vw, 4rem);         /* 36 → 64 */
  --t-h3: clamp(1.5rem, 2.2vw, 2.125rem);      /* 24 → 34 */
  --t-quote: clamp(1.75rem, 3.4vw, 3.25rem);   /* 28 → 52 */
  --t-price: clamp(2.5rem, 4vw, 3.75rem);      /* 40 → 60 */
  --t-num: clamp(3rem, 5vw, 4.5rem);           /* 48 → 72 */
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 12px; /* 11px from 900px up; 12px keeps phones legible */

  /* spacing — 8px base */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --s6: 64px; --s7: 96px; --s8: 128px; --s9: 192px;
  --pad: clamp(32px, 5vw, 96px);
  --pad-x: clamp(20px, 5vw, 96px);
  --nav-h: 64px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.45s;
}
@media (min-width: 900px) {
  :root { --t-body: 16px; --nav-h: 72px; --t-label: 11px; }
}