/* ============================================================
   fonts.css — Pong Horse Park Font System
   Single source of truth for all typography.
   Change fonts here only — no need to edit other files.

   ROLES:
   --font-heading  → Cinzel           (page titles, section titles, card headings)
   --font-number   → DM Serif Display (prices, booking IDs, amounts, counts)
   --font-ui       → Montserrat       (nav, labels, buttons, tags, badges)
   --font-body     → Lora             (paragraphs, form inputs, descriptions)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Montserrat:wght@300;400;500;600&family=Pridi:wght@400;600&display=swap');
:root {
    /* Heading: Luxury high-contrast serif + Professional Thai */
    --font-heading: 'Playfair Display', 'IBM Plex Sans Thai', serif;

    /* Numbers: Clean geometric sans + Thai */
    --font-number:  'Montserrat', 'IBM Plex Sans Thai', sans-serif;
    
    /* UI: Modern geometric + Thai */
    --font-ui:      'Jost', 'IBM Plex Sans Thai', sans-serif;

    /* Body: Elegant readable serif + Thai serif */
    --font-body:    'Lora', 'Pridi', serif;
}

/* ── BASE ── */
body {
    font-family: var(--font-body);
}

/* ── HEADINGS ── */
h1, h2, h3,
.section-title,
.search-title,
.booking-top .bid,
.card-top .bid,
.rider-name,
.footer-brand .name,
.logo-text .name,
.lux-header .name,
.pillar h3,
.exp-card-content h3,
.pkg-body h3,
.trust-item h3,
.split-item h3,
.chat-header .title,
.state-card h2,
.info-card-header,
.sum-card-header,
.about-quote p,
.hero h1,
.cta-band h2,
.motto-band .motto,
.empty-state,
.gen-card-header,
.welcome-bar .wname,
.login-card h2 {
    font-family: var(--font-heading);
}

/* ── NUMBERS / PRICES ── */
.pkg-price,
.amount-bar .amount-value,
.price-display,
.bid-display,
.total-price-bar,
.booking-top .bid,
.status-price-bar .price-display,
.card-top .amount,
.about-image + *,
.hero-eyebrow,
.pillar-num,
.amount,
#summaryTotalPrice,
#totalPriceDisplay {
    font-family: var(--font-number);
}

/* ── UI / LABELS / BUTTONS / NAV ── */
.section-label,
.field-label,
.gen-label,
.lux-label,
.lock-label,
.upload-title,
.panel-title,
.info-row .ikey,
.sum-row .label,
.rider-detail-item,
.addon-tag,
.status-badge,
.lux-nav a,
.logo-text .sub,
.chat-header .subtitle,
.footer-links a,
.footer-bottom p,
.footer-brand .address,
.method-tab,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-pay,
.btn-verify,
.btn-search,
.btn-upload,
.btn-copy,
.btn-book,
.btn-send,
.btn-paid,
.btn-addon,
.copy-btn,
.pay-link-btn,
.cc-request-btn,
.nav-cta,
.refresh-btn,
.send-btn,
.pay-status,
.booking-top .refresh-btn,
.motto-band .motto-translation,
.hero-eyebrow,
.tag,
.pkg-body .tag,
.exp-card-content .tag,
.pkg-body .duration,
.search-sub,
.otp-status,
.lock-status,
.status-msg,
.cc-status,
.panel-note,
.bid-save-note,
.toggle-btn,
.fbadge,
.fname,
.font-row-label,
.group-label,
.step-circle,
.dash-btn,
.admin-btn,
.gen-label,
.logout-link,
.error-bar,
.search-label {
    font-family: var(--font-ui);
}

/* ── BODY TEXT ── */
p,
.about-text p,
.split-item p,
.contact-value,
.info-row .ival,
.sum-row .value,
.pkg-body p,
.trust-item p,
.pillar p,
.lux-input,
.lux-select,
.field-input,
.field-select,
.gen-input,
.gen-select,
.link-input,
.package-select,
.otp-input,
.bot-msg,
.user-msg,
.hero-tagline,
.search-sub,
.about-quote p,
.rider-entry .rname + *,
#user-input {
    font-family: var(--font-body);
}