@font-face {
  font-family: "Recoleta";
  src: url("../assets/font/Recoleta/Web Fonts/recoleta_medium_macroman/recoleta-medium-webfont.woff2")
      format("woff2"),
    url("../assets/font/Recoleta/Web Fonts/recoleta_medium_macroman/recoleta-medium-webfont.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #1b6b8a;
  --color-primary-dark: #135571;
  --color-secondary: #ffffff;
  --color-accent: #ff8c6b;
  --color-accent-soft: #ffd9cc;
  --color-sage: #4a9b72;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-tinted: #ebf4f8;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #5b5b5b;
  --color-border: #e2e6dd;
  --color-emergency: #d93a2b;

  --font-display: "Recoleta", "Iowan Old Style", "Palatino Linotype", Georgia,
    serif;
  --font-body: "DM Sans", "Helvetica Neue", system-ui, sans-serif;

  --fs-display-lg: 36px;
  --fs-display-md: 26px;
  --fs-heading-sm: 20px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-label-md: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-control: 12px;
  --radius-card: 14px;
  --radius-sheet: 20px;
  --radius-pill: 9999px;

  /* "100% squircle" — uses the CSS Borders 4 `corner-shape` property
     (Safari 18.2+, 2024). On browsers that don't support it the property
     is ignored and `border-radius` falls back to the default round corner.
     Apply via `corner-shape: var(--corner-shape)` on any element that
     already has a non-pill, non-circle border-radius. */
  --corner-shape: squircle;

  --shadow-card: 0 2px 14px rgba(10, 77, 107, 0.09);
  --shadow-card-hover: 0 6px 22px rgba(10, 77, 107, 0.14);
  --shadow-sheet: 0 -2px 4px rgba(0, 0, 0, 0.06), 0 -6px 32px rgba(10, 77, 107, 0.22);
  --shadow-cta: 0 4px 16px rgba(27, 107, 138, 0.3);
  --shadow-pill: 0 2px 10px rgba(217, 58, 43, 0.28);

  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.32, 0.72, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --canvas-max: 402px;
  --page-margin: 24px;
}