/* LOCAL DEVELOPMENT ONLY.
 *
 * In production the booking component is mounted inside the Shopify theme,
 * which registers these fonts and tokens in snippets/brand-fonts.liquid and
 * snippets/styling-config-css.liquid. This file mirrors that setup so `npm
 * start` renders with the real brand typography instead of a system fallback.
 *
 * It is not bundled into static/js/bundle.js and is never loaded on the live
 * site. If the theme's font registry changes, update this file to match.
 */

/* Garet ships as Book and Heavy only. The weight ranges map the two real faces
   across the weights the UI uses so the browser never synthesises a fake bold. */
@font-face {
  font-family: "Garet";
  src: url("./fonts/Garet-Book.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("./fonts/Garet-Heavy.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* Magistral's lighter weights are supplied as MagistralC, the same typeface
   design as Magistral Extra Bold, so they register under one family. */
@font-face {
  font-family: "Magistral";
  src: url("./fonts/MagistralC-Regular.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magistral";
  src: url("./fonts/MagistralC-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magistral";
  src: url("./fonts/Magistral-ExtraBold.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magistral";
  src: url("./fonts/Magistral-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800 900;
  font-style: italic;
  font-display: swap;
}

/* Mirrors the theme defaults: Magistral headings in ALL CAPS, Garet body. */
:root {
  --font-heading-family: "Magistral", "Helvetica Neue", Arial, sans-serif;
  --font-heading-weight: 800;
  --font-heading-style: normal;
  --font-heading-text-transform: uppercase;
  --font-body-family: "Garet", "Century Gothic", "Avenir Next", Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;
}

/* Mirrors assets/theme-custom.css. The theme forces the body font onto every
   element and the heading font onto every h1-h6, both with `!important`, which
   also reaches inside this widget. That is why a title rendered as a span
   without `.booking-heading` looks correct on `npm start` but ships in the body
   font: src/index.css sets the family without `!important` and loses.
   Reproducing the override here, exceptions included, keeps dev honest. */
*,
html,
p,
span,
table,
tr,
td,
a,
div,
strong,
ul,
li,
ol,
input {
  font-family: var(--font-body-family) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading-family) !important;
  text-transform: var(--font-heading-text-transform);
}

#react-product h1:not(.booking-label),
#react-product h2:not(.booking-label),
#react-product h3:not(.booking-label),
#react-product h4:not(.booking-label),
#react-product h5:not(.booking-label),
#react-product h6:not(.booking-label),
#react-product .booking-heading {
  font-family: var(--booking-font-heading, var(--font-heading-family)) !important;
  text-transform: var(--booking-heading-transform, var(--font-heading-text-transform));
}

#react-product .booking-label {
  font-family: var(--booking-font-body, var(--font-body-family)) !important;
  text-transform: none;
}