/* Design tokens: plum-charcoal ink,
   soft lavender accents, light editorial serif headings, square corners. */
:root {
  /* Colour */
  --c-ink: #281d24;
  --c-text: #4d444a;
  --c-muted: #6b6269;
  --c-accent: #9c9bc8;
  --c-accent-strong: #5d5aa6;
  --c-accent-button: #6c6aad; /* accent lavender, darkened for AA contrast with white text */
  --c-tint: #dee0f1;
  --c-soft: #f6f7fb;
  --c-white: #ffffff;
  --c-line: #e4e2ea;
  --c-line-strong: #c9c6d3;
  --c-dark: #3f383d;
  --c-deep: #281d24;
  --c-plum: #4d444a;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #d9d3d8;
  --c-line-dark: rgba(255, 255, 255, 0.18);
  --c-error: #b3261e;
  --c-success: #2e6b4f;
  --c-focus: #5d5aa6;

  /* Typography: Cormorant Garamond for H1/H2 and display statements;
     Manrope for H3, body, buttons, navigation and labels. Both load from Google Fonts. */
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-accent: var(--font-body);

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.1875rem;   /* 19 */
  --fs-h3: 1.25rem;     /* 20 */
  --fs-h2: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.625rem, 1.85rem + 3.4vw, 4.5rem);
  --fs-quote: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  --lh-tight: 1.05;
  --lh-heading: 1.12;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-caps: 0.14em;
  --tracking-display: -0.01em;

  /* Layout */
  --container: 1400px;
  --container-wide: 1320px;
  --gutter: 1.25rem;
  --header-h: 72px;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);

  /* Shape */
  --radius: 0;
  --radius-round: 999px;
  --border: 1px solid var(--c-line);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 700ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --header-h: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 3rem;
  }
}