/* ==========================================================================
   Weavique London — site-wide typography (3-tier system)
   1. Eyebrows:  Inter, uppercase, tracked out, 12px, gold pill
   2. Headings:  Playfair Display (H1, H2, display titles, big numbers)
   3. Body & UI: Inter (paragraphs, buttons, forms, specs, small headings)
   The WEAVIQUE LONDON logo keeps its own font. Loaded last on every page.
   ========================================================================== */

:root {
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- 3. Body & UI ---------- */
body,
.btn,
input, select, textarea, button,
.form-control, .form-select, .form-floating > label,
table, .tooltip, .modal {
    font-family: var(--font-sans);
}
body { letter-spacing: -0.003em; }

/* Small headings (card titles, footer titles, step names) stay sans for clarity */
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* ---------- 2. Main headings ---------- */
h1, h2, .h1, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-serif);
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Logo wordmark keeps the original brand font */
.navbar .navbar-brand .h1 {
    font-family: 'Rubik', var(--font-sans);
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Big numerals read beautifully in the serif */
.moq-qty, .lb-step-num, .display-2 { font-family: var(--font-serif); font-weight: 500 !important; }

/* Components that had the old heading font hard-coded */
.moq-faq .accordion-button,
.accordion-button,
.cookie-banner-text strong,
.zoom-figure figcaption { font-family: var(--font-sans); }
.collection-section-head h2,
.cg-box-title,
.blog-card-body h2,
.article h2,
.qv-detail .collection-head h3 { font-family: var(--font-serif); font-weight: 500 !important; }
.cg-box-title { font-size: 20px; }

/* ---------- 1. Eyebrows / section labels ---------- */
p.text-uppercase.text-primary,
.hero-tag,
.lb-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid rgba(201, 150, 46, 0.55);
    border-radius: 40px;
    padding: 7px 16px;
}
/* gold text on white needs to be a little deeper to stay readable */
p.text-uppercase.text-primary { color: #84601A !important; }
/* on navy / dark sections, a brighter gold */
[style*="var(--dark)"] p.text-uppercase.text-primary,
.bg-dark p.text-uppercase.text-primary,
.glass-section p.text-uppercase.text-primary,
html[data-theme="dark"] p.text-uppercase.text-primary { color: #E3B860 !important; }

/* Small card labels: same family, same tracking */
.collection-eyebrow, .glass-eyebrow, .blog-meta, .cg-hint { font-family: var(--font-sans); }
.collection-eyebrow, .glass-eyebrow { letter-spacing: 0.16em; }