/* ==========================================================================
   DESIGN TOKENS — "Timeless coffee. Modern character."
   Every colour, type size, space, radius, shadow and motion value used on
   the site lives here. Components never invent their own values.
   ========================================================================== */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  /* Colour — coffee palette */
  --color-espresso: #24150F;
  --color-espresso-deep: #170D09;
  --color-coffee: #3A2117;
  --color-roast: #4B2E1F;
  --color-mocha: #6B4532;
  --color-caramel: #A77B55;
  --color-brass: #B08D57;
  --color-brass-light: #CDAE78;
  --color-cream: #F3EBDD;
  --color-parchment: #E8D9BF;
  --color-sand: #D7C5AA;
  --color-green: #2E382F;

  /* Semantic */
  --ink: var(--color-espresso);
  --ink-soft: rgba(36, 21, 15, .74);
  --ink-faint: rgba(36, 21, 15, .52);
  --paper: var(--color-cream);
  --line: rgba(36, 21, 15, .16);
  --line-strong: rgba(36, 21, 15, .34);
  --on-dark: var(--color-cream);
  --on-dark-soft: rgba(243, 235, 221, .72);
  --on-dark-faint: rgba(243, 235, 221, .5);
  --line-dark: rgba(243, 235, 221, .14);
  --focus: #D9B26F;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-display: clamp(3.1rem, 1.6rem + 6.4vw, 8.4rem);
  --text-h1: clamp(2.7rem, 1.7rem + 4.4vw, 6rem);
  --text-h2: clamp(2.2rem, 1.5rem + 2.9vw, 4.4rem);
  --text-h3: clamp(1.45rem, 1.25rem + .6vw, 1.9rem);
  --text-h4: 1.28rem;
  --text-lead: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  --text-body: 1.0625rem;
  --text-small: .9375rem;
  --text-caption: .8125rem;
  --text-label: .72rem;
  --text-price: 1.02rem;

  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.65;
  --tracking-label: .22em;
  --tracking-caps: .12em;

  /* Spacing (8pt-based) */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;  --space-11: 11rem;
  --section-y: clamp(5rem, 3.5rem + 7vw, 10.5rem);
  --gutter: clamp(1rem, .5rem + 2.6vw, 3rem);
  --container: 1320px;
  --container-narrow: 860px;

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-arch: 999px 999px 0 0;

  /* Shadow — soft, organic */
  --shadow-soft: 0 1px 2px rgba(23, 13, 9, .06), 0 12px 32px -12px rgba(23, 13, 9, .22);
  --shadow-lift: 0 2px 4px rgba(23, 13, 9, .08), 0 28px 60px -24px rgba(23, 13, 9, .45);

  /* Motion — slow, confident */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .25s;
  --dur-base: .5s;
  --dur-slow: 1.1s;
  --dur-cinematic: 1.6s;

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