/** Variables */

:root {
  /* Section: Colors. */
  --color-accent: #e5456d;
  --color-accent-hover: #d43b60;
  --color-text: #2d2b3a;
  --color-text-muted: #606060;
  --color-text-light: #909090;
  --color-bg: #f9f9f9;
  --color-green: #009800;
  --color-whatsapp: #25d366;
  --color-messenger: #0084ff;
  --color-whatsapp-hover: #1ebc57;
  --color-messenger-hover: #0073e6;
  --color-border: #cccccc;
  --color-white: #ffffff;

  /* Section: Breakpoints. Mobile-first — base CSS targets 0-639px.
     Scale up only with: @media (min-width: 640px), (min-width: 768px),
     (min-width: 1024px). NOTE: var() cannot be used inside @media;
     use these literal values. */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* Section: Spacing. */
  --spacing-xs: 3px;
  --spacing-sm: 5px;
  --spacing-md: 7px;
  --spacing-lg: 10px;
  --spacing-xl: 20px;

  /* Section: Radius. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 30px;
  --radius-circle: 50%;
}