/*
 * buyshea design tokens. See DECISIONS.md (Design) for the reasoning.
 *
 * Direction: warm and tactile, like the product. Cream ground, shea-brown ink,
 * terracotta for actions, muted sage for reassurance (delivery, security).
 * Contrast (WCAG, on --cream unless noted):
 *   --ink #4A2E1A ............ 11.2:1
 *   --ink-soft #6B4A33 ........ 7.0:1
 *   --accent-ink #A44E28 ...... 5.0:1  (links, small accent text)
 *   white on --accent-deep #A44E28 5.7:1 (buttons)
 *   --accent #C8663C is DECORATIVE ONLY (jar labels, route line, logo): white on it is
 *     3.9:1 and it is 3.4:1 on cream, both below 4.5:1, so it never carries text.
 *   --sage-ink #4F6143 ........ 6.0:1  (on --sage-wash 5.4:1)
 */
@font-face {
  font-family: 'Young Serif';
  src: url('/assets/fonts/young-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light; /* the palette is light-only; keep form controls light when the OS is dark */

  /* colour */
  --cream: #f6f1e7;
  --paper: #fffdf8;
  --butter: #efe3c8; /* the colour of refined shea; jar fills, quiet panels */
  --ink: #4a2e1a;
  --ink-soft: #6b4a33;
  --accent: #c8663c;
  --accent-deep: #a44e28;
  --accent-deeper: #8a3f1f;
  --accent-ink: #a44e28;
  --sage: #7d8f6e;
  --sage-ink: #4f6143;
  --sage-wash: #e3e8d9;
  --line: #dccfb8;
  --focus: #a44e28;
  --danger-ink: #8f2d14;
  --white: #ffffff;

  /* type */
  --font-display: 'Young Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Scale: perfect fourth (1.333) from a 1.0625rem (17px) body. */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 2.55rem);
  --step-4: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem);
  --leading: 1.6;
  --leading-tight: 1.15;
  --measure: 66ch;

  /* space */
  --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: 4.5rem;
  --gutter: 1rem;
  --page-max: 72rem;

  /* shape: jars have soft shoulders; panels barely round; buttons are pills */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;
  --tap: 44px;
}

@media (min-width: 40em) {
  :root {
    --gutter: 1.5rem;
  }
}