/* RandLeaf design tokens. Names describe purpose, not pages. */
@font-face {
  font-family: 'Mona Sans';
  src: url('/assets/fonts/mona-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: ink indigo, marigold leaf, cool paper and quiet washes */
  --color-paper: #f8f9fc;
  --color-surface: #ffffff;
  --color-text-primary: #1e2147;
  --color-text-muted: #4c4f6e;
  --color-text-inverse: #f8f9fc;
  --color-action: #2e3192;
  --color-action-hover: #23266f;
  --color-action-soft: #e3e4f6;
  --color-leaf: #f2b83b;
  --color-leaf-hover: #e5a721;
  --color-leaf-graphic: #b07a12;
  --color-leaf-text: #8a5b00;
  --color-wash-butter: #fff4d6;
  --color-wash-mist: #eeeffa;
  --color-wash-veld: #eaf2e6;
  --color-wash-sand: #eff1f6;
  --color-line: #e2e4ec;
  --color-line-strong: #82869a;
  --color-dark: #1e2147;
  --color-dark-raised: #2a2e5e;
  --color-success: #1d6b45;
  --color-success-wash: #e3f1e8;
  --color-error: #b3261e;
  --color-error-wash: #fbe9e7;
  --color-warning-wash: #fff1d6;
  --color-focus: #2e3192;
  --color-focus-inverse: #f2b83b;

  /* Type */
  --font-body: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --stretch-display: 120%;
  --stretch-heading: 112%;
  --stretch-label: 108%;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
  --text-display: clamp(2.125rem, 1.5rem + 3vw, 3.625rem);
  --text-money: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --leading-body: 1.6;
  --leading-tight: 1.12;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 620;
  --weight-bold: 680;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.6rem + 2.4vw, 2.5rem);
  --container: 74rem;
  --measure: 40rem;

  /* Shape: the leaf radius rounds two opposite corners, like the logomark */
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.375rem;
  --radius-leaf: 1.75rem 0.5rem;
  --radius-leaf-sm: 1.125rem 0.375rem;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --shadow-soft: 0 1px 2px rgb(30 33 71 / 0.05), 0 14px 34px -18px rgb(30 33 71 / 0.22);
  --shadow-lift: 0 2px 4px rgb(30 33 71 / 0.06), 0 22px 48px -24px rgb(30 33 71 / 0.3);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;

  /* Chrome */
  --header-height: 4rem;
  --bottom-bar-height: 4.25rem;
}