/*
 * VEYLOVA storefront typography system
 *
 * Loaded after the legacy storefront styles. This file owns text roles only:
 * font families, scale, rhythm, wrapping and numeric alignment. Layout, media,
 * renderer and commerce behavior stay in their existing modules.
 */

:root {
  --vl-font-display: Georgia, "Times New Roman", serif;
  --vl-font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --vl-text-caption: 0.75rem;
  --vl-text-secondary: 0.875rem;
  --vl-text-body: 1rem;
  --vl-text-lead: 1.125rem;
  --vl-text-subheading: 1.25rem;
  --vl-text-section: clamp(1.875rem, 3.2vw, 2.875rem);
  --vl-text-display: clamp(2.25rem, 5vw, 4.75rem);
  --vl-leading-compact: 1.2;
  --vl-leading-heading: 1.12;
  --vl-leading-body: 1.6;
  --vl-tracking-display: -0.025em;
  --vl-tracking-label: 0.08em;
}

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

body {
  font-family: var(--vl-font-body);
  font-size: var(--vl-text-body);
  line-height: var(--vl-leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

:where(button, input, select, textarea) {
  font-family: inherit;
}

:where(h1, h2, h3) {
  margin-block-start: 0;
  color: var(--ink, #171717);
  line-height: var(--vl-leading-heading);
  letter-spacing: var(--vl-tracking-display);
  text-wrap: balance;
}

:where(p, li, dd, figcaption) {
  text-wrap: pretty;
}

:where(.price, [data-price], .cart-price, .cart-total, .cart-summary-row, .home-hot-fit) {
  font-variant-numeric: tabular-nums;
}

/* Shared navigation and actions */
.nav-links,
.site-footer,
.button,
button,
.home-hot-continue,
.home-story-button,
.home-process-button {
  letter-spacing: 0;
}

.nav-links {
  font-size: 0.8125rem;
  font-weight: 750;
  line-height: 1.2;
}

.button,
.home-hot-continue,
.home-story-button,
.home-process-button,
.cart-checkout-button {
  font-size: var(--vl-text-secondary);
  font-weight: 750;
  line-height: 1.2;
}

/* Homepage */
.home-hero .hero-copy h1 {
  max-width: 15ch;
  font-family: var(--vl-font-display);
  font-size: var(--vl-text-display);
  font-weight: 400;
  line-height: 1.02;
}

.standard-copy strong {
  font-size: var(--vl-text-secondary);
  font-weight: 750;
  line-height: 1.2;
}

body.home-page .home-proof-v2 .standard-copy small,
.standard-copy small {
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  text-wrap: pretty;
}

.home-hot-header h2,
.home-story-copy h2,
.home-journal-header h2 {
  font-family: var(--vl-font-display);
  font-size: var(--vl-text-section);
  font-weight: 400;
  line-height: 1.05;
}

.home-process-head h2,
.home-review-header h2 {
  font-family: var(--vl-font-body);
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  font-weight: 850;
  line-height: 1.08;
}

.home-story-copy p,
.home-process-head p,
.home-review-header p,
.home-journal-header p {
  max-width: 62ch;
  font-size: var(--vl-text-body);
  line-height: var(--vl-leading-body);
}

.home-story-eyebrow,
.home-process-kicker,
.home-journal-kicker {
  font-size: var(--vl-text-caption);
  font-weight: 800;
  letter-spacing: var(--vl-tracking-label);
}

.home-hot-fit,
.home-hot-continue {
  font-size: 0.8125rem;
  line-height: 1.2;
}

.home-process-step strong,
.home-review-card strong,
.home-journal-card h3 {
  font-size: var(--vl-text-body);
  line-height: 1.25;
}

.home-process-step p,
.home-review-card p,
.home-journal-card p {
  font-size: var(--vl-text-secondary);
  line-height: 1.55;
}

body.home-page .home-process-index,
.home-process-step-number,
.home-process-index {
  font-size: var(--vl-text-caption) !important;
  font-weight: 850;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Collections and product cards */
.designer-page .designer-hero h2,
.journal-hero h1,
.cart-hero h1,
.journal-article-title {
  font-family: var(--vl-font-display);
  font-size: var(--vl-text-section);
  font-weight: 400;
  line-height: 1.06;
}

.product-card h3,
.product-card strong,
.designer-card h3,
.journal-card h3 {
  font-size: var(--vl-text-body);
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.product-meta,
.product-stones,
.journal-card-meta,
.article-meta {
  font-size: var(--vl-text-secondary);
  line-height: 1.5;
}

/* Cart and long-form content */
.cart-layout :where(h2),
.journal-section-header h2,
.journal-article-body h2 {
  font-size: var(--vl-text-subheading);
  line-height: 1.2;
}

.cart-layout :where(p, li, label),
.journal-card p,
.journal-article-body,
.journal-article-body :where(p, li) {
  font-size: var(--vl-text-body);
  line-height: var(--vl-leading-body);
}

.journal-article-body {
  max-width: 72ch;
}

.cart-material-name,
.cart-item-title {
  font-size: var(--vl-text-body);
  font-weight: 750;
  line-height: 1.3;
}

.cart-material-meta,
.cart-empty-copy,
.cart-summary-row,
.cart-note {
  font-size: var(--vl-text-secondary);
  line-height: 1.5;
}

/* English labels should wrap cleanly instead of being clipped. */
:where(
  .nav-links a,
  .button,
  .home-hot-continue,
  .product-card h3,
  .cart-material-name,
  .journal-card h3
) {
  overflow-wrap: anywhere;
}

@media (max-width: 47.99rem) {
  :root {
    --vl-text-display: clamp(2rem, 9vw, 2.75rem);
    --vl-text-section: clamp(1.75rem, 7.5vw, 2.25rem);
  }

  .nav-links {
    font-size: 0.6875rem;
  }

  .home-hero .hero-copy h1 {
    max-width: 14ch;
    line-height: 1.04;
  }

  .standard-copy strong {
    font-size: 0.75rem;
  }

  body.home-page .home-proof-v2 .standard-copy small,
  .standard-copy small {
    font-size: 0.6875rem !important;
    line-height: 1.4 !important;
  }

  .home-process-head h2,
  .home-review-header h2 {
    font-size: clamp(1.75rem, 7vw, 2.125rem);
  }

  .home-story-copy p,
  .home-process-head p,
  .home-review-header p,
  .home-journal-header p {
    font-size: 0.9375rem;
  }

  .home-process-step strong,
  .home-review-card strong,
  .home-journal-card h3 {
    font-size: 0.9375rem;
  }

  .home-process-step p,
  .home-review-card p,
  .home-journal-card p,
  .product-meta,
  .product-stones,
  .journal-card-meta,
  .article-meta {
    font-size: 0.8125rem;
  }

  .home-hot-fit,
  .home-hot-continue {
    font-size: 0.75rem;
  }

  .product-card h3,
  .product-card strong,
  .designer-card h3,
  .cart-material-name,
  .cart-item-title {
    font-size: 0.875rem;
  }
}

@media (max-width: 22.5rem) {
  .nav-links {
    font-size: 0.625rem;
  }

  .standard-copy strong,
  .home-hot-fit,
  .home-hot-continue {
    font-size: 0.6875rem;
  }
}