/* Design tokens: every color, font, size and spacing the site uses.
   Rules and intent for each one are in docs/estilo.md; keep both in step. */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* DM Serif Display, digits only: the services' numbers */
@font-face {
  font-family: 'DM Serif Display';
  src: url('/fonts/dm-serif-digits.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand (logo) */
  --navy: #0e3864;
  --blue: #5ba3dd;
  --gray: #84898f;
  /* Added */
  --amber: #f2a93b;
  --amber-dark: #d98e1f;
  --blue-text: #2a72af; /* --blue darkened enough to read as text on cream */
  --gray-text: #5f646a; /* --gray darkened enough for small text */
  --navy-dark: #0a2a4b;
  --whatsapp: #25d366;
  --whatsapp-dark: #1fb457;

  /* Surfaces */
  --bg: #faf7f2; /* cream: main page */
  --bg-white: #ffffff; /* appointment page, cards */
  --sand: #e9dcc3; /* the path */
  --line: #e4ddd1; /* hairlines, borders */

  --text: var(--navy);
  --text-soft: var(--gray-text);
  --highlight: var(--blue-text);

  /* Type */
  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --font-num: 'DM Serif Display', Georgia, serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Fluid sizes: phone -> wide screen */
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2vw, 3rem);
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* Spacing (multiples of 8px) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;

  /* Shapes */
  --radius: 12px;
  --radius-pill: 999px;
  --shadow: 0 4px 18px rgba(14, 56, 100, 0.1);

  /* Layout */
  --header-h: 96px;
  --content-max: 760px;
  --gutter: 16px;
}