/* POPHIES design tokens
   Source: DESIGN.md (colour, type and layout system) — edit here for global changes. */
:root {
  /* Brand palette */
  --ink: #20211f;
  --ink-soft: #2b2c29;
  --graphite: #62635f;
  --ivory: #f5f1e9;
  --white: #fcfbf8;
  --stone: #d8d3ca;
  --brass: #a77a43;
  --light: #e8c58d;
  --success: #56705a;
  --warning: #b56c45;
  --error: #a5483f;

  /* Text on dark surfaces */
  --on-dark-muted: #b8b9b4;
  --on-dark-dim: #a7a8a3;
  --on-dark-line: #3a3b38;

  /* Soft section band, one step between warm ivory and stone */
  --surface-soft: #eeebe3;

  /* Typography */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.9rem, 6.1vw, 5.6rem);
  --fs-h2: clamp(2rem, 3.5vw, 3.35rem);
  --fs-h3: clamp(1.3rem, 1.7vw, 1.8rem);
  --fs-h4: 1rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.75rem;
  --lh-tight: 1.05;
  --lh-body: 1.65;
  --track-tight: -0.035em;
  --track-label: 0.16em;

  /* Layout */
  --container: 1320px;
  --gutter: 48px;
  --section: 120px;
  --section-sm: 84px;
  --read: 720px;
  --header-h: 72px;

  /* Surfaces */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow: 0 18px 50px rgba(32, 33, 31, 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 980px) {
  :root {
    --gutter: 32px;
    --section: 96px;
    --section-sm: 72px;
  }
}

@media (max-width: 660px) {
  :root {
    --gutter: 20px;
    --section: 78px;
    --section-sm: 60px;
    --header-h: 64px;
    --fs-body: 1rem;
  }
}