/* Brand tokens: the only place colours, fonts and spacing are defined.
   Solid colours only. The brand does not use gradients. */
:root {
  /* Colour */
  --black: #0d0d0d;
  --off-white: #faf9f6;
  --grey: #e9e9e6;
  --white: #ffffff;
  --cream: #fff4e4; /* text on black */
  --coral: #ed723a; /* main brand colour; always black text on it, never coral text on pale backgrounds */
  --coral-dark: #d95f28; /* hover and chart lines */
  --coral-pulse: rgba(237, 114, 58, 0.6);
  --coral-tint: #fbe1d3;
  --coral-wash: #fdf0e9;
  --red: #e6321a; /* large text and shapes only */
  --logo-red: #d03b3d; /* the Momentum line's dot, from the owner's logo file */
  --rust: #7a2e00; /* small text on coral-tint */

  --text: var(--black);
  --text-muted: #55524e;
  --text-on-dark: var(--cream);
  --text-on-dark-muted: #d9cdbb;
  --line: rgba(13, 13, 13, 0.12);
  --line-strong: rgba(13, 13, 13, 0.55);
  --line-on-coral: rgba(13, 13, 13, 0.28);
  --line-on-dark: rgba(255, 244, 228, 0.16);
  --phone-edge: #3a3a38;

  /* Laptop illustration */
  --laptop-shell: #cfcfcb;
  --laptop-edge: #a9a9a4;
  --laptop-bezel: #121212;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --fs-hero: clamp(2.75rem, 6.2vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* Shape and space */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8rem);
  --max: 1160px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --shadow-card: 0 1px 2px rgba(13, 13, 13, 0.06), 0 10px 26px rgba(13, 13, 13, 0.08);
  --shadow-phone: 0 30px 60px rgba(13, 13, 13, 0.24);
  --shadow-laptop: 0 24px 40px rgba(13, 13, 13, 0.18);
}