@font-face {
  font-family: 'Futura Round';
  src: url('fonts/Futura Round.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Futura Round Bold';
  src: url('fonts/Futura Round Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');

:root {
  /* fonts (brandbook: Futura Round, Bold cut is the primary weight) */
  --dtb-font-family: 'Futura Round', sans-serif;
  --dtb-font-family-bold: 'Futura Round Bold', sans-serif;
  /* Longer-form text (product descriptions, form labels) reads better as a plain
     text face than the display-oriented Futura Round — Montserrat per request. */
  --dtb-font-family-secondary: 'Montserrat', sans-serif;

  /* colors */
  /* Primary brand color (dark teal) — buttons, links, active states, body text */
  --dtb-primary: #194751;
  /* Lightened primary for hover states — checked against white btn text: 5.65:1 (AA pass) */
  --dtb-hover: #277080;
  --dtb-color: var(--dtb-primary);

  --dtb-btn-color: #ffffff;
  --dtb-btn-bg: var(--dtb-primary);
  --dtb-btn-active-bg: var(--dtb-primary);
  --dtb-btn-active-color: var(--dtb-btn-color);
  --dtb-btn-hover-color: var(--dtb-btn-color);

  /* Secondary brand color (coral). White text on coral (the CTA pill pattern
     used on pokesi.es, e.g. "PIDE EN GLOVO") is only 2.32:1 — fails WCAG AA
     (needs 4.5:1). Confirmed with the client: keep white to match the site's
     look, contrast trade-off accepted knowingly. Coral is still never used as
     text/border color on a *light* background elsewhere (see .btn-outline-secondary
     below) — that pairing fails even the lower 3:1 UI-component minimum. */
  --dtb-secondary: #f28f87;
  --dtb-btn-secondary: var(--dtb-secondary);
  --dtb-btn-secondary-color: var(--dtb-btn-color);

  --dtb-input-border-focus: var(--dtb-primary);
  --bs-link-color: var(--dtb-primary);
  --bs-link-hover-color: var(--dtb-hover);
}

/* Bold cut for headings and button labels, per brandbook ("Bold... la principal") */
h1,
h2,
h3,
h4,
h5,
.btn {
  font-family: var(--dtb-font-family-bold);
}

/* Pill-shaped buttons, matching the CTA style on pokesi.es. Scoped to solid
   primary/secondary buttons only — applying this to outline/list-style buttons
   (payment method selector, promotions list) stretched short icon buttons into
   ovals and warped multi-line list buttons into stadium shapes. */
.btn-primary,
.btn-secondary {
  --bs-btn-border-radius: 999px;
}

/* Montserrat for longer-form text: product descriptions and form labels */
.item-description,
.dtb-item-description-grid,
.dtb-item-description-modal,
label,
.form-label,
.form-check-label {
  font-family: var(--dtb-font-family-secondary);
}

/* btn-outline-secondary defaults to --dtb-btn-secondary (coral) for text/border,
   which fails contrast on white — use the primary teal instead, same as
   btn-outline-primary. Coral stays reserved for solid fills. */
.btn-outline-secondary {
  --bs-btn-color: var(--dtb-primary);
  --bs-btn-border-color: var(--dtb-primary);
  --bs-btn-hover-color: var(--dtb-btn-color);
  --bs-btn-hover-bg: var(--dtb-primary);
  --bs-btn-hover-border-color: var(--dtb-primary);
}