/* Ravencove design tokens. Exact names per CONTRACT.md (with the 5B amplification); do not rename. */
:root {
  --mist: #EDF0F3;
  --water: #DCE2E8;
  --salt: #F6F8FA;
  --slate: #3C4550;
  --raven: #121519;
  --paper: #F3EEE4;
  --iris: #5A3FD8;
  --iris-deep: #4632B0;
  --iris-tint: #E4E0F7;
  --rule: rgba(60, 69, 80, .4);

  /* deep water (5B). glow and rose are LIGHT only: the seam gradient, the halo, the ripple, the pulse ring; never a fill, never text */
  --deep: #0E1826;
  --deep-2: #16243A;
  --glow: #B56BFF;
  --rose: #FF6FB1;
  --rule-deep: rgba(237, 240, 243, .28);
  --muted-deep: rgba(220, 226, 232, .78);

  --ease-slack: cubic-bezier(0.26, 0.88, 0.14, 1);
  --ease-swell: cubic-bezier(0.62, 0.05, 0.28, 0.98);
  --dur-fast: .2s;
  --dur-base: .56s;
  --dur-slow: 1.4s;

  --gutter: max(16px, 2vw);
  --header-h: 64px;

  --font-head: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif;
  --font-text: 'Instrument Sans Variable', 'Instrument Sans', 'Instrument Fallback', system-ui, sans-serif;

  --h1: clamp(3rem, 9.5vw, 15rem);
  --h2: clamp(2.5rem, 4.8vw, 6.75rem);
  --h3: clamp(1.5rem, 2.2vw, 2.75rem);
  --body: 1.0625rem;
  --fig-xl: 96px;
  --fig-lg: 72px;
  --fig-md: 56px;

  /* width axis for the H1; home.js tunes it between 84 and 100 so the line always spans */
  --h1-wdth: 90;
}

/* the width axis is animatable when registered */
@property --wdth {
  syntax: '<number>';
  inherits: true;
  initial-value: 90;
}