/* ═══════════════════════════════════════════════════════════════════════
   ptfeballs.in — Typography System
   Inter · fluid scale · single source of truth
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 3 LOCAL FONTS ONLY (Inter 400 · 600 · 700) ─────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── ROOT TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Root size */
  --font-root: 16px;

  /* Family — 3 local Inter files only (400 / 600 / 700) */
  --font-family: 'Inter';
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Fluid type scale (min → max) */
  --type-hero:   clamp(2.5rem, 3.5vw + 1rem, 4rem);           /* 40px → 64px */
  --type-h2:     clamp(1.875rem, 2vw + 1rem, 2.5rem);          /* 30px → 40px */
  --type-h3:     clamp(1.5rem, 1vw + 1.125rem, 1.75rem);        /* 24px → 28px */
  --type-card:   clamp(1.25rem, 0.5vw + 1.125rem, 1.375rem);   /* 20px → 22px */
  --type-body:   clamp(1rem, 0.2vw + 0.9375rem, 1.125rem);     /* 16px → 18px */
  --type-small:  clamp(0.875rem, 0.1vw + 0.8125rem, 0.9375rem); /* 14px → 15px */
  --type-nav:    1rem;    /* 16px */
  --type-button: 1rem;    /* 16px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.75;

  --leading-hero:   var(--leading-tight);
  --leading-h2:     1.15;
  --leading-h3:     var(--leading-snug);
  --leading-card:   1.3;
  --leading-body:   var(--leading-relaxed);
  --leading-small:  var(--leading-normal);
  --leading-nav:    var(--leading-normal);
  --leading-button: var(--leading-normal);

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.1em;

  /* Measure */
  --text-max-width: 72ch;

  /* Legacy aliases (for gradual migration — do not use in new rules) */
  --font-sans:       var(--font-family);
  --font-size-xs:    var(--type-small);
  --font-size-sm:    var(--type-small);
  --font-size-base:  var(--type-body);
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   var(--type-h3);
  --font-size-3xl:   1.875rem;
  --font-size-4xl:   2.5rem;
  --font-size-5xl:   2.5rem;
  --font-size-6xl:   4rem;
}

/* ── UNIVERSAL LOCAL FONT — every element uses Inter only ─────────── */
html {
  font-family: var(--font-family);
  font-size: var(--font-root);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  font-family: inherit;
  font-synthesis: none;
}

button,
input,
select,
textarea,
optgroup,
option,
label,
legend,
summary,
figcaption,
table,
th,
td,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
span,
small,
strong,
em,
::placeholder {
  font-family: inherit;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

/* ── BASE ──────────────────────────────────────────────────────────── */

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

/* ── SEMANTIC ELEMENTS ─────────────────────────────────────────────── */
h1, .type-hero {
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
}

h2, .type-h2 {
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

h3, .type-h3 {
  font-size: var(--type-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-semibold);
}

h4, .type-card {
  font-size: var(--type-card);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

p, .type-body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

small, .type-small {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

/* ── PROSE MEASURE ─────────────────────────────────────────────────── */
.prose,
.lead-text,
.about-content p,
.hero-sub,
.hero-sub-desc,
.band-intro,
.band-callout,
.capabilities-intro,
.capabilities-lead,
.product-card p,
.faq-answer p,
.app-card p,
.process-step-content p,
.contact-serving p,
.inquiry-intro,
.table-note,
.form-note,
.custom-cta-block p {
  max-width: var(--text-max-width);
}

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero-eyebrow,
.hero-badge {
  font-size: var(--type-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-small);
}

.hero-title {
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
}

.hero-sub {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

.hero-sub-tagline {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

.hero-sub-desc {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

/* ── NAVIGATION ────────────────────────────────────────────────────── */
.logo-text {
  font-size: var(--type-nav);
  letter-spacing: -0.01em;
}

.nav-link {
  font-size: var(--type-nav);
  line-height: var(--leading-nav);
  font-weight: var(--font-weight-semibold);
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn,
.float-cta,
.submit-btn {
  font-size: var(--type-button);
  line-height: var(--leading-button);
  font-weight: var(--font-weight-semibold);
}

.btn-sm {
  font-size: var(--type-small);
}

/* ── SECTIONS ──────────────────────────────────────────────────────── */
.section-label {
  font-size: var(--type-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-small);
}

.section-title {
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.section-intro {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.band-heading {
  font-size: var(--type-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.band-intro,
.band-callout {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

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

/* ── TRUST BAR ─────────────────────────────────────────────────────── */
.trust-number {
  font-size: var(--type-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.trust-label {
  font-size: var(--type-small);
  line-height: var(--leading-small);
  letter-spacing: 0.06em;
}

/* ── CARDS & GRIDS ─────────────────────────────────────────────────── */
.stat-card h3,
.stat-card-caption h3 {
  font-size: var(--type-card);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

.stat-card p,
.stat-card-caption p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.product-card h3 {
  font-size: var(--type-card);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

.product-card p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.prop-row {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.product-apps li {
  font-size: var(--type-small);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
}

.about-highlights li {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

.app-card h3 {
  font-size: var(--type-card);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

.app-card p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.app-card ul li {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

/* ── TABLES ────────────────────────────────────────────────────────── */
.data-table {
  font-size: var(--type-body);
}

.data-table th {
  font-size: var(--type-small);
  letter-spacing: 0.07em;
  line-height: var(--leading-small);
}

.badge {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.table-note {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* ── PROCESS ───────────────────────────────────────────────────────── */
.process-step-num {
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-small);
}

.process-step-content h3 {
  font-size: var(--type-body);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

.process-step-content p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* ── CAPABILITIES ──────────────────────────────────────────────────── */
.capabilities-subtitle {
  font-size: var(--type-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.capabilities-subheading {
  font-size: var(--type-card);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.capabilities-intro,
.capabilities-lead {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

.capabilities-item-title {
  font-size: var(--type-body);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

.capabilities-item-desc {
  font-size: var(--type-small);
  line-height: var(--leading-body);
}

.capabilities-factory-panel .stat-card-caption h4,
.capabilities-factory-panel .stat-card h4 {
  font-size: var(--type-body);
  line-height: var(--leading-card);
  font-weight: var(--font-weight-semibold);
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq-item summary {
  font-size: var(--type-body);
  line-height: 1.45;
  font-weight: var(--font-weight-semibold);
}

.faq-item summary::after {
  font-size: var(--type-card);
  line-height: 1;
  font-weight: var(--font-weight-regular);
}

.faq-answer p {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

/* ── CONTACT & FORMS ───────────────────────────────────────────────── */
.contact-info-item {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.contact-serving h3 {
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-small);
  font-weight: var(--font-weight-semibold);
}

.contact-serving p {
  font-size: var(--type-body);
  line-height: var(--leading-loose);
}

.custom-inquiry-form label {
  font-size: var(--type-body);
  font-weight: var(--font-weight-semibold);
}

.custom-inquiry-form input[type="text"],
.custom-inquiry-form input[type="email"],
.custom-inquiry-form input[type="tel"],
.custom-inquiry-form textarea,
.size-filter-input,
#size-filter {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.form-note {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.error-message {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.custom-cta-block p {
  font-size: var(--type-small);
  line-height: var(--leading-body);
}

/* ── FOOTER ────────────────────────────────────────────────────────── */
.footer-company {
  font-size: var(--type-body);
  font-weight: var(--font-weight-semibold);
}

.footer-tagline {
  font-size: var(--type-small);
  line-height: var(--leading-body);
}

.footer-util a {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.footer-bottom p {
  font-size: var(--type-small);
  line-height: var(--leading-body);
}

/* ── UTILITIES ─────────────────────────────────────────────────────── */
.skip-to-content {
  font-size: var(--type-small);
  font-weight: var(--font-weight-semibold);
}

.noscript-banner {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* ── 404 ───────────────────────────────────────────────────────────── */
.error-page__title {
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--font-weight-bold);
}

.error-page__lead {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.error-page__meta {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

/* ── DECORATIVE ICONS (non-text scale) ─────────────────────────────── */
.stat-card-icon,
.app-icon,
.process-step-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.process-step-icon {
  font-size: 2rem;
}

.icon-emoji--sm {
  font-size: 1rem;
  line-height: 1.4;
}

.icon-emoji--contact {
  font-size: 1.125rem;
  line-height: 1.4;
}

.response-icon {
  font-size: 1.5rem;
  line-height: 1;
}