/* Design tokens. Edit with the design-tweaks panel (Ctrl+`) in dev, or by hand. */
:root {
  /* @group Colours */
  --color-bg: #f3f0e9;
  --color-surface: #f8f6f1;
  --color-text: #2b2b28;
  --color-heading: #0d0d0b;
  --color-muted: #63625b;
  --color-primary: #dcf542;
  --color-primary-hover: #cbe62c;
  --color-accent: #15803d;
  --color-border: #e0dbcf;
  --color-ink-dark: #0f1713;
  --color-on-dark: #f3f0e9;
  --color-muted-on-dark: #a8aba3;
  --color-border-dark: #26302b;
  --color-placeholder: #dedad1;
  --color-placeholder-dark: #2a312d;
  --color-ui-pill: #ecebe9;

  /* @group Type */
  --font-heading: 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-numeral: 'Oswald', 'Inter Tight', sans-serif;
  --font-hand: 'Caveat', cursive;
  --text-base: 100%; /* @range 87.5 125 2.5 */
  --text-ratio: 1.25; /* @range 1.125 1.5 0.005 */
  --text-xs: calc(var(--text-sm) / var(--text-ratio));
  --text-sm: calc(1rem / var(--text-ratio));
  --text-md: 1rem;
  --text-lg: calc(1rem * var(--text-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-ratio));
  --text-2xl: calc(var(--text-xl) * var(--text-ratio));
  --text-3xl: calc(var(--text-2xl) * var(--text-ratio));
  --text-display: clamp(2.75rem, 6.25vw, 7.03rem);
  --tracking-tight: -0.035em;
  --tracking-label: 0.12em;

  /* @group Spacing */
  --space-unit: 0.25rem; /* @range 0.2 0.35 0.005 */
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --space-24: calc(var(--space-unit) * 24);
  --radius: 4px; /* @range 0 32 1 */
  --radius-btn: 0.325rem; /* @range 0 1.625 0.025 */ /* 10% of the 3.25rem button height */
  --wrap: 1920px;
  --gutter: clamp(1rem, 5.375vw, 7rem);
  --hs: 1rem; /* @label Hero and strip scale unit */
}
html { font-size: var(--text-base); }