:root {
  color-scheme: dark;

  --bg: #0B0B0A;
  --surface: #171614;
  --field: #24221F;
  --field-press: #403C36; /* a control's pressed tone, one clear step above --field (1.4:1 or more), see test/contrast.test.js */
  --line-field: #7A746A; /* field border: 3:1 on --surface and --field (WCAG 1.4.11), see test/contrast.test.js */
  --ink: #EDEBE7;
  --muted: #A29D94;
  --gold: #C9B36E;
  --yellow: #FFDE59;
  --yellow-hover: #FFE98F;
  --on-accent: #0B0B0A;
  --whatsapp: #1B8343;
  --whatsapp-hover: #166E38;
  --white: #FFFFFF;
  --error: #FF8F85;
  --scrim: rgba(11, 11, 10, 0.72);

  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-text: "Work Sans", system-ui, sans-serif;

  /* Five sizes, far apart */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-sub: clamp(1.75rem, 1.2rem + 1.5vw, 2.875rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);
  --step-display: clamp(3.25rem, 0.9rem + 10vw, 11rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section-gap: clamp(5rem, 3rem + 7vw, 11rem);
  --max: 1760px;
  --hit: 44px; /* smallest tappable box: Apple's 44 pt, WCAG 2.5.5 */
  --hit-phone: 48px; /* the header controls on phones, a little above --hit */
  --btn-h: 52px; /* a button's height: .btn, the Llamar button in the menu and the footer social tiles */
  --header-h: 4.75rem;
  --nav-toggle-w: 5rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 100ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-appear: 200ms; /* the hero action fading in: quick enough to never hold it back */
}