/*
  Design system — "Editorial Mansion"
  Every value below is pulled from the actual building: the terracotta brick
  facade, the poured-concrete interior, the brass espresso machine, the
  charcoal chalkboard menus, cream plaster walls.
*/

@font-face {
  font-family: "Fraunces";
  src: url("../vendor/fonts/Fraunces-Roman-VF.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../vendor/fonts/Fraunces-Italic-VF.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/Inter-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../vendor/fonts/Caveat-VF.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — named for the material it comes from */
  --ink: #211e1a;          /* chalkboard charcoal / concrete ceiling */
  --concrete: #6f6a5e;     /* poured-concrete floor, warm grey */
  --concrete-soft: #a8a297;
  --cream: #f3ebdc;        /* plaster wall */
  --cream-dim: #e8ddc8;
  --terracotta: #b5502e;   /* brick facade */
  --terracotta-soft: #d98a63;
  --brass: #c79a56;        /* espresso machine trim */
  --ember: #7a2e18;        /* deep brick shadow */

  --paper: #faf6ee;

  /* Type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-marker: "Caveat", cursive;

  --fs-hero: clamp(2.75rem, 3vw + 2rem, 6rem);
  --fs-h1: clamp(2.25rem, 2vw + 1.75rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4vw + 1.4rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.75rem);
  --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
  --fs-small: 0.875rem;
  --fs-marker: clamp(1.15rem, 0.5vw + 1rem, 1.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4rem, 8vw, 8rem);
  --radius: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}