/*
 * Design tokens. The palette is the toucan's: its five quarter-circle colours, plus a warm cream
 * and the vet app's teal, so the site and the app feel like the same family.
 * Components use the semantic tokens below, never the raw colours directly.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-3084aa15.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-1f021a24.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* The toucan */
  --rust: #c65c2f;
  --mustard: #ddc54b;
  --mint: #7eb494;
  --slate: #304d56;
  --sage: #5f827c;
  --eye: #23211a;

  /* Around it */
  --slate-deep: #1e3238;
  --slate-ink: #142328;
  --cream: #fbf6ec;
  --sand: #f2e9d6;
  --sand-deep: #e6d9bd;
  --white: #ffffff;
  --teal: #0d9488;
  --whatsapp: #25d366;

  /* Semantic */
  --color-bg: var(--cream);
  --color-surface: var(--white);
  --color-text: #1d2326;
  --color-text-muted: #4f5b5e;
  --color-border: #e3d8c2;
  --color-link: var(--slate);
  --color-accent: var(--mustard);
  --color-on-dark: #f4efe4;
  --color-on-dark-muted: #c3cfcd;
  --color-focus: var(--rust);
  --color-danger: #b42318;

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --text-hero: clamp(2.6rem, 1.4rem + 5.6vw, 5.75rem);

  /* Space (4px grid) and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(20 35 40 / 0.06), 0 8px 24px rgb(20 35 40 / 0.08);
  --shadow-lg: 0 2px 4px rgb(20 35 40 / 0.06), 0 24px 48px rgb(20 35 40 / 0.14);

  --container: 1180px;
  --gutter: 16px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}