/* ------------------------------------------------------------------
   Design tokens — extra CSS custom properties beyond the colour palette.
   Everything here is a real CSS variable on :root, so it can be referenced
   anywhere with var(...) — including Elementor's atomic (V4) editor fields and
   custom CSS. Pair these with the colours in palette.css.
------------------------------------------------------------------ */
:root {
  /* Spacing scale */
  --w-space-1: 4px;
  --w-space-2: 8px;
  --w-space-3: 12px;
  --w-space-4: 16px;
  --w-space-5: 24px;
  --w-space-6: 32px;
  --w-space-7: 48px;
  --w-space-8: 64px;

  /* Type scale (EB Garamond reads large; these are gentle steps) */
  --w-text-sm:  0.875rem;
  --w-text-base:1rem;
  --w-text-lg:  1.25rem;
  --w-text-xl:  1.5rem;
  --w-text-2xl: 2rem;
  --w-text-3xl: 2.75rem;

  /* Radii */
  --w-radius-sm: 10px;
  --w-radius-lg: 24px;
  /* (--w-radius and --w-radius-pill come from palette.css) */

  /* Fonts */
  --w-font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------
   A few optional utility classes you can add to any Elementor element
   (Advanced → CSS Classes, or as a Global Class in the atomic editor).
------------------------------------------------------------------ */
.w-container { max-width: var(--w-content-max); margin-inline: auto; }
.w-muted     { color: var(--w-text-secondary); }
.w-accent    { color: var(--w-text-accent); }
.w-serif     { font-family: var(--w-font-serif); }
.w-center    { text-align: center; }