/*
  TopTravelESIM — eSIM Aggregator Typography v1.0
  Fonts: Manrope (headlines), Inter (UI, body, tables and figures)
  Load fonts with HTML <link> (see accompanying markdown).
  All font sizes use rem with 1rem = 16px (default browser setting).
*/

:root {
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-primary: #102B3F;
  --text-body: #334E61;
  --text-muted: #52677A;
  --text-on-primary: #FFFFFF;
  --brand-primary: #007C74;
  --brand-primary-hover: #006A63;

  --type-hero-size: 3.625rem;     /* 58px */
  --type-hero-leading: 1.10;
  --type-h1-size: 3rem;          /* 48px — inner-page H1 */
  --type-h2-size: 2.125rem;      /* 34px */
  --type-h3-size: 1.5rem;        /* 24px */
  --type-h4-size: 1.25rem;       /* 20px */
  --type-body-size: 1rem;       /* 16px */
  --type-body-leading: 1.625;   /* 26px */
  --type-secondary-size: .875rem;/* 14px */
  --type-caption-size: .8125rem;/* 13px */
  --type-label-size: .75rem;     /* 12px */
  --type-price-size: 1.75rem;    /* 28px */
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: 400;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .os-title {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: -.025em;
}

.os-hero-title {
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-leading);
  font-weight: 800;
  letter-spacing: -.038em;
  max-width: 13.5ch;
}
h1, .os-page-title {
  font-size: var(--type-h1-size);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.035em;
}
h2, .os-section-title {
  font-size: var(--type-h2-size);
  line-height: 1.20;
  font-weight: 700;
  letter-spacing: -.03em;
}
h3, .os-card-heading {
  font-size: var(--type-h3-size);
  line-height: 1.30;
  font-weight: 700;
  letter-spacing: -.02em;
}
h4, .os-subsection-heading {
  font-size: var(--type-h4-size);
  line-height: 1.35;
  font-weight: 700;
}
.os-body { font: 400 1rem/1.625 var(--font-body); }
.os-lead { font: 400 1.125rem/1.55 var(--font-body); }
.os-secondary { font: 400 .875rem/1.5 var(--font-body); color: var(--text-muted); }
.os-caption { font: 400 var(--type-caption-size)/1.45 var(--font-body); color: var(--text-muted); }
.os-eyebrow {
  font: 700 var(--type-label-size)/1.4 var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.os-nav-link { font: 600 .875rem/1.4 var(--font-body); }
.os-filter-label { font: 600 .8125rem/1.4 var(--font-body); }
.os-control, input, select, textarea {
  font: 500 1rem/1.4 var(--font-body); /* 16px avoids iOS input focus zoom */
}
.os-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  font: 700 .9375rem/1.35 var(--font-body); /* 15px */
  letter-spacing: 0;
}
.os-plan-name { font: 700 1.125rem/1.35 var(--font-display); letter-spacing: -.01em; }
.os-plan-data { font: 700 1rem/1.4 var(--font-body); }
.os-price {
  font-family: var(--font-body);
  font-size: var(--type-price-size);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.os-table, .os-table th, .os-table td { font: 400 .875rem/1.5 var(--font-body); }
.os-table th { font-weight: 600; color: var(--text-primary); }
.os-table td[data-type="price"], .os-numeric {
  font-variant-numeric: tabular-nums lining-nums;
}
.os-badge {
  font: 700 .75rem/1.3 var(--font-body);
  letter-spacing: .01em;
}
.os-search-summary { font: 600 .875rem/1.5 var(--font-body); }
.os-footer-link { font: 500 .875rem/1.55 var(--font-body); }

@media (max-width: 1023px) {
  :root {
    --type-hero-size: 2.875rem; /* 46px */
    --type-h1-size: 2.5rem;     /* 40px */
    --type-h2-size: 1.875rem;   /* 30px */
    --type-h3-size: 1.375rem;   /* 22px */
  }
}
@media (max-width: 767px) {
  :root {
    --type-hero-size: 2.125rem; /* 34px */
    --type-h1-size: 2rem;       /* 32px */
    --type-h2-size: 1.625rem;   /* 26px */
    --type-h3-size: 1.25rem;    /* 20px */
    --type-h4-size: 1.125rem;   /* 18px */
    --type-price-size: 1.625rem;/* 26px */
  }
  .os-hero-title { line-height: 1.16; max-width: none; letter-spacing: -.03em; }
  .os-button { min-height: 52px; }
  .os-lead { font-size: 1rem; line-height: 1.6; }
  .os-table, .os-table th, .os-table td { font-size: .875rem; }
  .os-card-heading { line-height: 1.3; }
}

/* Accessibility and platform notes:
   - Keep body and important tariff information at >= 14px.
   - Do not force fixed text heights; allow 200% zoom and wrapping.
   - Never convey plan status using color alone.
   - Buttons and controls should have >= 44x44 CSS px touch targets.
   - Use strong contrast for text on mint/yellow chips.
   - Do not replace verified provider data with mockup values.
*/