/* Trawa Romero brand typography parity.
   This file intentionally changes family roles only: route scale, spacing,
   weights and layout stay owned by the already-approved page styles. */
:root,
body {
  --tr-brand-type-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --tr-brand-type-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Canonical roles. */
  --tr-font-display: var(--tr-brand-type-display);
  --tr-font-body: var(--tr-brand-type-body);
  --tr-font-ui: var(--tr-brand-type-body);
  --tr-role-display: var(--tr-brand-type-display);
  --tr-role-body: var(--tr-brand-type-body);
  --tr-role-ui: var(--tr-brand-type-body);
  --tr-display-font: var(--tr-brand-type-display);
  --tr-ui-font: var(--tr-brand-type-body);
  --tr-type-serif: var(--tr-brand-type-display);
  --tr-type-sans: var(--tr-brand-type-body);
  --tr-type-ui: var(--tr-brand-type-body);
  --tr-type-mono: var(--tr-brand-type-body);
  --tr-font-mono: var(--tr-brand-type-body);

  /* Compatibility aliases used by older EN, PL and ES route families. */
  --serif: var(--tr-brand-type-display);
  --serif-2: var(--tr-brand-type-display);
  --serif2: var(--tr-brand-type-display);
  --display: var(--tr-brand-type-display);
  --editorial: var(--tr-brand-type-display);
  --wordmark: var(--tr-brand-type-display);
  --font-display: var(--tr-brand-type-display);
  --ui: var(--tr-brand-type-body);
  --sans: var(--tr-brand-type-body);
  --font-body: var(--tr-brand-type-body);
  --font-ui: var(--tr-brand-type-body);
  --font-mono: var(--tr-brand-type-body);
  --tr-mono: var(--tr-brand-type-body);
  --trawa-ui: var(--tr-brand-type-body);

  --tracker-display: var(--tr-brand-type-display);
  --tracker-ui: var(--tr-brand-type-body);
  --end-user-display: var(--tr-brand-type-display);
  --end-user-wordmark: var(--tr-brand-type-display);
  --end-user-ui: var(--tr-brand-type-body);
  --article-display: var(--tr-brand-type-display);
  --article-brand: var(--tr-brand-type-display);
  --article-ui: var(--tr-brand-type-body);
  --compare-wordmark: var(--tr-brand-type-display);
  --compare-serif: var(--tr-brand-type-display);
  --compare-display: var(--tr-brand-type-display);
  --compare-brand: var(--tr-brand-type-display);
  --compare-body: var(--tr-brand-type-body);
  --compare-ui: var(--tr-brand-type-body);
  --compare-label: var(--tr-brand-type-body);
  --producer-display: var(--tr-brand-type-display);
  --producer-brand: var(--tr-brand-type-display);
  --producer-title: var(--tr-brand-type-body);
  --producer-body: var(--tr-brand-type-body);
  --forum-display: var(--tr-brand-type-display);
  --forum-deferred-display: var(--tr-brand-type-display);
  --forum-ui: var(--tr-brand-type-body);
  --forum-deferred-ui: var(--tr-brand-type-body);
  --institutional-display: var(--tr-brand-type-display);
  --institutional-editorial: var(--tr-brand-type-display);
  --institutional-ui: var(--tr-brand-type-body);
  --sp-display: var(--tr-brand-type-display);
  --sp-ui: var(--tr-brand-type-body);
  --ac-display: var(--tr-brand-type-display);
  --ac-ui: var(--tr-brand-type-body);
  --atlas-display: var(--tr-brand-type-display);
  --atlas-body: var(--tr-brand-type-body);
  --guide-display: var(--tr-brand-type-display);
  --guide-body: var(--tr-brand-type-body);
  --e-display: var(--tr-brand-type-display);
  --e-ui: var(--tr-brand-type-body);
  --rx-wordmark: var(--tr-brand-type-display);
  --rx-serif: var(--tr-brand-type-display);
  --rx-ui: var(--tr-brand-type-body);
  --tr-display: var(--tr-brand-type-display);
  --tr-ui: var(--tr-brand-type-body);
}

html,
body {
  font-family: var(--tr-brand-type-body) !important;
}

/* Body and interface roles. The exclusions are deliberate: infographic
   components keep their authored lettering and SVG/canvas typography. */
body :where(
  p, li, dt, dd, figcaption, blockquote, address, th, td,
  label, input, select, textarea, button, summary,
  nav, footer, small, time, code, pre, kbd, samp,
  .button, .btn, [role="button"], [data-tr-type-role="ui"]
):not(:where(
  [data-legal-ribbon] *,
  [data-prescription-infographic] *,
  [data-prescription-process] *,
  [data-infographic] *,
  .tr-rx-infographic *,
  .epic-infographic *
)) {
  font-family: var(--tr-brand-type-body) !important;
}

/* Editorial display roles. Product names and section titles use the same
   original Trawa Romero face in all three locales. */
body :where(
  h1, h2, h3, h4, h5, h6,
  .wordmark, .tr-wordmark,
  .section-title, .section-head, .section-heading,
  .hero-title, .atlas-hero h1, .gallery-title,
  .catalog-strain-name, .strain-ficha-head h2,
  .product-title, .topic-title,
  .city-price-heading strong, .city-price-name,
  .forum-panel-heading h2, .forum-profile > strong,
  .forum-entry-card strong, .forum-topic-card strong
):not(:where(
  [data-legal-ribbon] *,
  [data-prescription-infographic] *,
  [data-prescription-process] *,
  [data-infographic] *,
  .tr-rx-infographic *,
  .epic-infographic *
)) {
  font-family: var(--tr-brand-type-display) !important;
}

/* Component-local aliases can otherwise shadow :root because custom
   properties resolve at the component. Normalize the public data surfaces. */
:where(
  .price-saved-tools,
  #previewDialog,
  .user-report-panel,
  .tr-community-dialog,
  .community-preview-layout
) {
  --tr-ui-font: var(--tr-brand-type-body);
  --tr-display-font: var(--tr-brand-type-display);
  --tr-editorial-font: var(--tr-brand-type-display);
}

/* Preserve the approved legal-path infographic lettering. Its mono labels are
   an intentional visual device; prose stays Hanken and the headline Playfair. */
body.tr-home-v3 [data-legal-ribbon] h2 {
  font-family: var(--serif, var(--tr-brand-type-display)) !important;
}

body.tr-home-v3 [data-legal-ribbon] :where(
  .tr-legal-ribbon__roles > b,
  .tr-legal-ribbon__step h3,
  .tr-legal-ribbon__step p
) {
  font-family: var(--sans, var(--tr-brand-type-body)) !important;
}

body.tr-home-v3 [data-legal-ribbon] :where(
  .tr-legal-ribbon__eyebrow,
  .tr-legal-ribbon__role-list li,
  .tr-legal-ribbon__node,
  .tr-legal-ribbon__step small,
  .tr-legal-ribbon__footer
) {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
}

/* ==========================================================================
   iOS Frosted Glassmorphism (.iphone-blur-box) & Premium Button Surfaces
   ========================================================================== */

.iphone-blur-box {
  background: rgba(255, 255, 255, 0.4); /* Translucent white background */
  backdrop-filter: blur(20px);           /* The core iOS blur effect */
  -webkit-backdrop-filter: blur(20px);   /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle edge highlight */
  border-radius: 20px;                   /* Smooth iOS-style corners */
}

/* Apply translucent iOS blur aesthetics to interactive buttons across surfaces */
:where(
  .btn,
  .button,
  .btn-secondary,
  .nav-toggle,
  .tr-nav-toggle,
  .tr-language-toggle,
  .segment,
  .text-action,
  .tr-map-btn,
  .tr-map-city-pill,
  .nav-price-verification
) {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform .15s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:where(
  .btn:not(.btn-pink):not(.btn-primary):not([data-tone="primary"]),
  .btn-secondary,
  .button-secondary
) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream, #f1e9df);
}

:where(
  .btn:not(.btn-pink):not(.btn-primary):not([data-tone="primary"]),
  .btn-secondary,
  .button-secondary
):hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

:where(
  .btn-pink,
  .btn-primary,
  .pricebtn,
  [data-tone="primary"].btn
) {
  background: linear-gradient(180deg, rgba(246, 164, 189, 0.92), rgba(223, 126, 158, 0.92));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 20px;
  color: #1a0d12;
  box-shadow: 0 6px 24px rgba(223, 126, 158, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

:where(
  .btn-pink,
  .btn-primary,
  .pricebtn,
  [data-tone="primary"].btn
):hover {
  background: linear-gradient(180deg, rgba(252, 188, 208, 0.98), rgba(235, 142, 172, 0.98));
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(223, 126, 158, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}