/* HOLIDAY TRADITION — the classic Christmas combination:
   deep FOREST-GREEN headings, rich RED accents, dark SLATE-GREY body text, gold touches,
   and a warm, traditional SERIF (Playfair Display) for the display type.

   Font is SELF-HOSTED (../../fonts/playfair/) so it works within the storefront CSP
   (font-src 'self') — Google Fonts is blocked. Everything is scoped to this theme (the
   file only loads when Holiday Tradition is active); body copy stays the readable base sans.

   ⚠ THIS FILE IS ONE OF TWO BYTE-IDENTICAL COPIES — the storefront's
   public/assets/css/microsite/ (the live page) and the admin's
   content/assets/css/microsite/ (the booking-block editor preview). They are the same
   file on purpose: a change to one and not the other is a preview that disagrees with
   the page it is previewing. Change both, and keep them identical.

   ⚠ THE FONT IS NOW A TOKEN, NOT A LITERAL. This is the only one of the microsite themes
   that has ever had an opinion about type. It used to express that by hardcoding Playfair
   with !important, which worked because booking.css loads after this file — and which
   would now also override the photographer's own font choice. It sets --heading-font
   instead; see the two notes further down before touching either half. */

/* booking-fonts.css declares this same family from this same file, so on a booking page
   this @font-face is a duplicate — harmless, the browser dedupes by src. It stays because
   it is what makes the theme self-contained: any consumer that links a microsite theme
   without also linking the font bundle still renders Playfair rather than Georgia. */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;   /* variable */
    font-display: swap;
    src: url('../../fonts/playfair/playfair-display-latin.woff2') format('woff2');
}

:root {
    --font-color: rgba(51, 65, 85, 1);            /* dark slate grey body text (#334155) */
    --font-light-color: rgba(51, 65, 85, 1);
    --font-dark-color: rgba(236, 240, 235, 1);

    --heading-color: rgba(20, 83, 45, 1);         /* deep forest green headings (#14532D) */
    --heading-light-color: rgba(20, 83, 45, 1);
    --heading-dark-color: rgba(236, 240, 235, 1);

    /* This theme's one typographic opinion. booking-fonts.css sets the platform
       default (Poppins) before this file loads; equal :root specificity means this
       wins, and the photographer's own choice — emitted after the theme link — wins
       over both. That ordering is the whole override mechanism.
       ⚠ --body-font is deliberately NOT set: body copy stays the base sans, which is
       what "traditional serif on the display type" means. Setting it here to make a
       matching pair would put a serif under every paragraph on the page. */
    --heading-font: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --icon-color: rgba(178, 20, 38, 1);           /* red accent (#B21426) */
    --icon-light-color: rgba(178, 20, 38, 1);
    --icon-dark-color: rgba(232, 158, 158, 1);

    --bg-color: rgba(252, 250, 247, 1);           /* warm off-white */
    --bg-light-color: rgba(252, 250, 247, 1);
    --bg-dark-color: rgba(20, 26, 22, 1);         /* deep green-charcoal dark mode */

    --bg-light-secondary: rgba(255, 255, 255, 1);
    --bg-dark-secondary: rgba(34, 44, 36, 1);
    --card-bg: rgba(255, 255, 255, 1);

    --accent-orange: rgba(178, 20, 38, 1);        /* RICH deep red accent — buttons, price, badges, callouts */
    --accent-light-orange: rgba(178, 20, 38, 1);
    --accent-dark-orange: rgba(178, 20, 38, 0.78);

    --accent-green: rgba(18, 74, 40, 1);          /* deep forest green (#124A28) — button HOVER + checkmarks; darker than the red */
    --accent-light-green: rgba(18, 74, 40, 1);
    --accent-dark-green: rgba(30, 100, 55, 0.8);

    --accent-dark-gold: rgba(196, 154, 58, 0.9);  /* festive gold highlight (#C49A3A) */

    --cart-grey: rgba(244, 244, 242, 1);
    --cart-light-grey: rgba(244, 244, 242, 1);
    --cart-dark-grey: rgba(74, 74, 74, 1);

    --border-muted: rgba(51, 65, 85, 0.16);       /* slate-tinted border */

    --accessibility-blue: rgba(110, 140, 155, 1);

    --shadow-color: rgba(0, 0, 0, 0.2);
    --soft-shadow: rgba(30, 40, 32, 0.4);

    --prepaid-background-color: rgba(238, 244, 238, 1);
    --prepaid-border-color: rgba(20, 83, 45, 1);
    --prepaid-font-color: rgba(20, 83, 45, 1);
    --prepaid-icon-color: rgba(178, 20, 38, 1);

    --font-green: rgba(20, 83, 45, 1);
    --font-blue: rgba(20, 83, 45, 1);
    --font-white: rgba(250, 249, 246, 1);

    --photo-border-color: rgba(20, 83, 45, 1);
    --photo-border-dark-color: rgba(236, 240, 235, 1);
}

/* Warm traditional serif on the display type.
   ⚠ THIS RULE NO LONGER NAMES A FAMILY — it reads --heading-font, which the :root
   block above sets to Playfair and a photographer's own choice can override. It used
   to hardcode Playfair with !important specifically to beat booking.css's
   `h1..h6 { font-family:'Poppins' !important }`, and that hardcoding would now beat
   the photographer's choice too — the theme would silently win every time.

   ⚠ AND IT IS NOT REDUNDANT WITH THE :root VAR. Two thirds of these selectors —
   every .premium-*, .pkg-price-sm, .service-name, .location-name, .booking-steps
   .step — are NOT among the sites booking.css tokenized, so they have no font-family
   of their own to pick the var up through. Delete this rule as "the var already does
   it" and the display type on those surfaces quietly reverts to the base sans.
   The !important and the letter-spacing are still doing work; only the family moved. */
body h1, body h2, body h3, body h4, body h5, body h6,
.premium-pkg-name, .premium-pkg-price, .premium-details-title, .premium-love-label,
.pkg-name, .pkg-price, .pkg-price-sm, .service-name, .location-name,
.panel-heading, .active-product-heading, .month-heading, .time-heading, .svc-name,
.booking-steps .step, .premium-see-toggle, .premium-strip-lbl, .premium-included-name {
    font-family: var(--heading-font) !important;
    letter-spacing: 0.004em;
}