@font-face {
  font-display: block;
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  src: url("assets/nunito-sans-latin-variable.woff2") format("woff2");
}

:root {
  /* SayWhen direction: warm momentum, clear product structure, and restrained social energy.
     Palette is drawn straight from the logo mark: cyan #5ae6f0 and lime #dcf05a hands
     forming a heart, anchored by the navy #143246 wordmark. */
  --aqua: #0f9caf;
  --display-font: "Nunito Sans", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --body-font: "Nunito Sans", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --ui-font: "Nunito Sans", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --brand-font: "Chango", "Nunito Sans", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --button-aqua: #5ae6f0;
  --mint: #9beba5;
  --lime: #dcf05a;
  --navy: #143246;
  --ink: #0f2634;
  --text: #274154;
  --muted: #657684;
  --mist: #eaf9fc;
  --paper: #f4fbfd;
  --surface: #ffffff;
  --surface-strong: #fbfdff;
  --white: #ffffff;
  --line: #ecebe6;
  --line-soft: #ecebe6;
  --brand-gradient: linear-gradient(90deg, #afeaf0 0%, #cff4df 50%, #eaf9c9 100%);
  --brand-glow: radial-gradient(58% 46% at 50% 42%, rgba(90, 230, 240, 0.42), rgba(155, 235, 165, 0.28) 45%, rgba(220, 240, 90, 0) 72%);
  --contact-wash: linear-gradient(120deg, rgba(90, 230, 240, 0.14), rgba(155, 235, 165, 0.1) 52%, rgba(220, 240, 90, 0.16));
  --page-background: #eaf9fc;
  --shadow: 0 12px 26px rgba(20, 50, 70, 0.08);
  --shadow-soft: 0 8px 18px rgba(20, 50, 70, 0.06);
  --shadow-lift: 0 18px 34px rgba(20, 50, 70, 0.11);

  /* Playful, light accent washes drawn from the logo colours */
  --wash-cyan: #e5f8fd;
  --wash-cyan-strong: #c9f0f8;
  --wash-lime: #f4fadf;
  --wash-lime-strong: #e9f6bb;
  --wash-mint: #e8f8ef;

  /* Chat bubble tints: light shades of the CTA ombre (cyan -> mint -> lime) */
  --bubble-cyan: #e8fbff;
  --bubble-mint: #eefbf1;
  --bubble-lime: #f7fbdc;

  /* Rounder, friendlier geometry for the bold/social direction */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --type-root: 16px;
  --type-display: clamp(2.1rem, 6.6vw, 3.6rem);
  --type-display-line-height: 1.02;
  --type-display-weight: 800;
  --type-heading-2: clamp(1.85rem, 4.6vw, 2.9rem);
  --type-heading-3: 1.3rem;
  --type-body-large: clamp(1.04rem, 1.45vw, 1.18rem);
  --type-body: 1rem;

  color-scheme: light;
  color: var(--text);
  font-family: var(--body-font);
  font-size: var(--type-root);
  line-height: 1.5;
}