/**
 * Design tokens, measured from the Oxygen site this theme replaces.
 *
 * Type and spacing are fluid between a 375px phone and the 1280px container,
 * landing on the old site's fixed desktop values at the top end.
 *
 * @package Novara
 */

:root {
  /* Colour. Names follow what the colour is, not the Oxygen labels. */
  --novara-forest: #236e5a;
  --novara-sage: #4f8b7b;
  --novara-mint: #82b5aa;
  --novara-coral: #e4693f;
  --novara-coral-deep: #ab4f2f;
  --novara-ink: #1f2322;
  --novara-sand: #f6f0ea;
  --novara-sand-deep: #d4ccc2;
  --novara-stone: #f7f5f3;
  --novara-paper: #ffffff;
  --novara-rule: rgba(31, 35, 34, 0.08);

  /* Type. */
  --font-display: "optima-nova-lt-pro", "Optima", "Candara", "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-body: 300;

  --fs-label: 0.875rem;
  --fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --fs-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --lh-body: 1.4;

  --fs-h1: clamp(2.125rem, 1.71rem + 1.77vw, 3.125rem);
  --fs-h2: clamp(1.75rem, 1.54rem + 0.88vw, 2.25rem);
  --fs-h3: clamp(1.3rem, 1.22rem + 0.33vw, 1.5rem);
  --fs-h4: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);

  /* Space. */
  --container: 1280px;
  --section-pad-x: 20px;
  --section-pad-y: clamp(2.75rem, 1.94rem + 3.45vw, 4.6875rem);
  --space-xs: 0.5rem;
  --space-s: clamp(0.75rem, 0.7rem + 0.22vw, 0.875rem);
  --space-m: clamp(1rem, 0.9rem + 0.44vw, 1.25rem);
  --space-l: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);

  --grid-cols: 12;
  --gutter: 20px;

  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 20px;
  --shadow-card: 0 48px 100px 0 rgba(17, 12, 46, 0.05);
}

/* Surfaces. Every block reads these, so accent and secondary text follow the
   ground it sits on. */
.block--white {
  --block-bg: var(--novara-paper);
  --block-fg: var(--novara-ink);
  --block-heading: var(--novara-forest);
  --block-muted: #4a5250;
  --block-panel: var(--novara-stone);
}

.block--sand {
  --block-bg: var(--novara-sand);
  --block-fg: var(--novara-ink);
  --block-heading: var(--novara-forest);
  --block-muted: #4a5250;
  --block-panel: rgba(255, 255, 255, 0.45);
}

.block--stone {
  --block-bg: var(--novara-stone);
  --block-fg: var(--novara-ink);
  --block-heading: var(--novara-forest);
  --block-muted: #4a5250;
  --block-panel: var(--novara-paper);
}

.block--forest {
  --block-bg: var(--novara-forest);
  --block-fg: var(--novara-paper);
  --block-heading: var(--novara-paper);
  --block-muted: rgba(255, 255, 255, 0.82);
  --block-panel: rgba(255, 255, 255, 0.08);
  --block-kicker: var(--novara-sand);
}