/* ==========================================================================
   THE SACRED CODE — Centralized Global Typography System
   Fonts: Playfair Display (Headings/Titles) & Poppins (Body/UI)
   ========================================================================== */

:root {
  /* === Font Families === */
  --font-display: 'Playfair Display', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --font-sans: 'Poppins', sans-serif;
  --font-family-heading: 'Playfair Display', serif;
  --font-family-body: 'Poppins', sans-serif;
  --font-family-sans: 'Poppins', sans-serif;

  /* === Desktop Typography Scale === */
  --text-hero: 3.5rem;       /* 56px */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.5rem;         /* 40px */
  --text-h3: 2rem;           /* 32px */
  --text-h4: 1.75rem;        /* 28px */
  --text-h5: 1.5rem;         /* 24px */
  --text-h6: 1.25rem;        /* 20px */
  --text-large: 1.125rem;    /* 18px */
  --text-body: 1rem;         /* 16px */
  --text-small: 0.875rem;    /* 14px */
  --text-caption: 0.75rem;   /* 12px */
  --text-nav: 1rem;          /* 16px */
  --text-button: 1rem;       /* 16px */
  --text-price: 1.25rem;     /* 20px */

  /* === Font Weights === */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* === Line Heights === */
  --leading-hero: 1.15;
  --leading-h1: 1.2;
  --leading-h2: 1.25;
  --leading-h3: 1.3;
  --leading-h4: 1.35;
  --leading-h5: 1.4;
  --leading-h6: 1.4;
  --leading-body: 1.6;
  --leading-large: 1.7;
  --leading-small: 1.5;
  --leading-caption: 1.4;
}

/* ==========================================================================
   HEADINGS & TITLES (PLAYFAIR DISPLAY & POPPINS)
   ========================================================================== */

/* Hero Titles */
.hero-title,
#hero-content h1,
.display-heading {
  font-family: var(--font-display) !important;
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-hero);
}

/* H1 — Main Headings / Page Titles / Banner Titles */
.h1,
h1,
.category-hero-title,
.tsc-page-banner h1,
.page-title,
.banner-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h1);
}

/* H2 — Section Titles */
.h2,
h2,
.section-title,
.section-title-wrap h2,
#gift-title,
#gift-content h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h2);
}

/* H3 — Featured Product Titles / Blog Titles */
.h3,
h3,
#featured-art-title,
.featured-title,
.blog-title,
.tsc-blog-card-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
}

/* H4-H6 — Product Cards / Sub-elements */
.h4, h4 {
  font-family: var(--font-body) !important;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
}

.h5, h5 {
  font-family: var(--font-body) !important;
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h5);
}

.h6, h6 {
  font-family: var(--font-body) !important;
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h6);
}

/* ==========================================================================
   BODY & UI ELEMENTS (POPPINS)
   ========================================================================== */

body,
p,
li,
div,
span,
td,
th,
input,
select,
textarea,
label {
  font-family: var(--font-body) !important;
}

body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Body Large */
.text-large-body,
.text-lg,
.lead {
  font-family: var(--font-body) !important;
  font-size: var(--text-large);
  font-weight: var(--weight-regular);
  line-height: var(--leading-large);
}

/* Body Normal */
.text-body {
  font-family: var(--font-body) !important;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Small Text */
.text-small,
.small,
small,
.text-muted,
.price-note {
  font-family: var(--font-body) !important;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-small);
}

/* Caption */
.text-xs,
.caption,
figcaption {
  font-family: var(--font-body) !important;
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-caption);
}

/* Navigation */
.top-nav-links a,
.nav-action,
.cat-nav-item,
.nav-link,
.mobile-menu-item {
  font-family: var(--font-body) !important;
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
}

/* Buttons */
.hero-btn,
.btn,
.btn-primary,
.btn-secondary,
.btn-tsc-gold,
.btn-tsc-outline {
  font-family: var(--font-body) !important;
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
}

/* Price */
.price,
.card-price,
#featured-art-price,
.tsc-product-info .price {
  font-family: var(--font-body) !important;
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
}

/* Product Info & Cards */
.collection-card-label,
.card-title,
.small-product-info h4,
.tsc-product-card .card-title {
  font-family: var(--font-body) !important;
}

/* Forms & Tables */
.form-control,
.form-select,
.form-label,
.table th,
.table td {
  font-family: var(--font-body) !important;
}

/* Footer */
#footer,
.footer-col-title,
.footer-links a,
#footer-tagline {
  font-family: var(--font-body) !important;
}

/* Admin UI */
.admin-ui,
.admin-ui * {
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY (TABLET: max-width 991px)
   ========================================================================== */
@media (max-width: 991px) {
  :root {
    --text-hero: 2.75rem;    /* 44px */
    --text-h1: 2.25rem;      /* 36px */
    --text-h2: 2rem;         /* 32px */
    --text-h3: 1.75rem;      /* 28px */
    --text-body: 1rem;       /* 16px */
  }

  .hero-title,
  #hero-content h1 {
    font-size: var(--text-hero);
  }

  .h1, h1, .category-hero-title {
    font-size: var(--text-h1);
  }

  .h2, h2, .section-title-wrap h2, #gift-content h2 {
    font-size: var(--text-h2);
  }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY (MOBILE: max-width 576px)
   ========================================================================== */
@media (max-width: 576px) {
  :root {
    --text-hero: 2.125rem;   /* 34px */
    --text-h1: 1.875rem;     /* 30px */
    --text-h2: 1.625rem;     /* 26px */
    --text-h3: 1.375rem;     /* 22px */
    --text-h4: 1.25rem;      /* 20px */
    --text-h5: 1.125rem;     /* 18px */
    --text-h6: 1rem;         /* 16px */
    --text-body: 0.9375rem;  /* 15px */
    --text-small: 0.875rem;  /* 14px */
  }

  .hero-title,
  #hero-content h1 {
    font-size: var(--text-hero);
  }

  .h1, h1, .category-hero-title {
    font-size: var(--text-h1);
  }

  .h2, h2, .section-title-wrap h2, #gift-content h2 {
    font-size: var(--text-h2);
  }

  .h3, h3, #featured-art-title {
    font-size: var(--text-h3);
  }

  body, p, li {
    font-size: var(--text-body);
  }

  .text-small, small {
    font-size: var(--text-small);
  }
}