/*
  Storefront luxury typography system
  - Display/editorial: Playfair Display
  - UI/body: Inter
*/

:root {
  --font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --text-body: clamp(1rem, 0.98rem + 0.2vw, 1.0625rem); /* 16–17 */
  --leading-body: 1.7;

  --text-ui-sm: 0.9375rem; /* 15 */
  --leading-ui: 1.55;

  --h1: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
  --h2: clamp(1.7rem, 1.25rem + 1.4vw, 2.4rem);
  --h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
  --h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);

  --tracking-ui: 0.02em;
  --tracking-caps: 0.12em;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap globals: make every component inherit Inter by default */
:root {
  --bs-font-sans-serif: var(--font-ui);
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: var(--leading-body);
}

/* Editorial hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: var(--h1); font-weight: 700; }
h2 { font-size: var(--h2); font-weight: 600; }
h3 { font-size: var(--h3); font-weight: 600; }
h4 { font-size: var(--h4); font-weight: 600; }

/* Rules mapping (storefront) */
.hero-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.section-title,
.footer-section-title,
.breadcrumb-bar .current { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }

.navbar,
.nav-link,
.dropdown-item,
.modern-navbar .nav-link-label {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
}

.btn,
button,
input[type="button"],
input[type="submit"] {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
}

input,
select,
textarea,
.form-control,
.form-select {
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--leading-ui);
}

/* Product naming & pricing */
.product-name,
.product-title,
.product-card .card-title,
.product-card h5,
.product-card h6,
.product-details h1,
.product-details h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

.price,
.product-price,
.cart-price,
.order-total,
.checkout-total,
.amount,
.total-amount,
.grand-total,
.final-price {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

/* Body copy + footer */
p,
.footer-description,
.footer-links a,
.footer-bottom-bar,
.feature-text,
.section-subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
}

/* Small utilities for future components */
.font-display { font-family: var(--font-display) !important; }
.font-ui { font-family: var(--font-ui) !important; }
.tracking-luxury { letter-spacing: var(--tracking-ui) !important; }
.caps-luxury { letter-spacing: var(--tracking-caps) !important; text-transform: uppercase; }

@supports (text-wrap: balance) {
  .text-balance { text-wrap: balance; }
}