/* ============================================================
   ProjectsHub — Global Type System
   ------------------------------------------------------------
   Loaded after every other stylesheet so the stack, the scale
   and the rendering hints apply site-wide.

   Display / headings .... Outfit            (geometric, 600–800)
   Body / UI ............. Plus Jakarta Sans (humanist, 400–700)
   Code .................. system mono stack (no extra download)

   Component rules that set their own font-size keep it — this
   layer fixes the family, the rhythm and the optical details.
   ============================================================ */

:root,
html,
body,
html.light,
body.light {
  --ph-font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ph-font-heading: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --ph-font-display: var(--ph-font-heading);
  --ph-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Fluid scale — 1.25 ratio, clamped so it never collapses on mobile
     or runs away on ultrawide. */
  --ph-text-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --ph-text-sm: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
  --ph-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --ph-text-lg: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --ph-text-xl: clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem);
  --ph-text-2xl: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --ph-text-3xl: clamp(2rem, 1.65rem + 1.5vw, 2.8rem);
  --ph-text-4xl: clamp(2.4rem, 1.85rem + 2.4vw, 3.6rem);

  /* Tracking tightens as type grows — the single biggest tell
     between stock web type and a designed page. */
  --ph-track-display: -0.035em;
  --ph-track-heading: -0.022em;
  --ph-track-body: -0.005em;
  --ph-track-label: 0.08em;

  --ph-leading-display: 1.08;
  --ph-leading-heading: 1.22;
  --ph-leading-body: 1.65;
}

/* ── Rendering quality ──────────────────────────────────── */

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

body {
  font-family: var(--ph-font-sans);
  font-size: var(--ph-text-base);
  font-weight: 400;
  line-height: var(--ph-leading-body);
  letter-spacing: var(--ph-track-body);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Form controls and buttons do not inherit type by default. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* ── Headings ───────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--ph-font-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--ph-text-4xl);
  font-weight: 800;
  line-height: var(--ph-leading-display);
  letter-spacing: var(--ph-track-display);
}

h2,
.h2 {
  font-size: var(--ph-text-3xl);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

h3,
.h3 {
  font-size: var(--ph-text-2xl);
  font-weight: 700;
  line-height: var(--ph-leading-heading);
  letter-spacing: var(--ph-track-heading);
}

h4,
.h4 {
  font-size: var(--ph-text-xl);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.018em;
}

h5,
.h5 {
  font-size: var(--ph-text-lg);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

h6,
.h6 {
  font-size: var(--ph-text-base);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.008em;
}

/* ── Body copy ──────────────────────────────────────────── */

p,
li,
dd,
blockquote,
figcaption {
  text-wrap: pretty;
}

p {
  line-height: var(--ph-leading-body);
}

/* Long-form reading columns get a comfortable measure. Scoped to
   article-style containers so component layouts are untouched. */
article p,
.legal-content p,
.blog-content p,
.post-content p,
.page-content p,
.prose p {
  max-width: 68ch;
}

strong,
b {
  font-weight: 650;
}

small,
.small {
  font-size: var(--ph-text-sm);
  letter-spacing: 0;
}

/* ── Micro-labels: eyebrows, pills, badges, table heads ─── */

.about-badge,
.projects-badge,
.pricing-badge,
.hero-tag,
.brd-section-label,
.num-tag,
.eyebrow,
.section-label,
th {
  font-family: var(--ph-font-sans);
  font-weight: 600;
  letter-spacing: var(--ph-track-label);
  font-variant-numeric: lining-nums;
}

/* ── Numerals ───────────────────────────────────────────── */

/* Counters and stats must not jitter as digits change width. */
.count-up,
.num-stat-value,
.hvc-stat__value,
.about-stat-card__value,
.cs-card__stat-val,
.ind-stat-num,
.acf-stat-number,
.legal-section__number,
time,
td,
table {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.count-up,
.num-stat-value,
.hvc-stat__value,
.about-stat-card__value,
.ind-stat-num,
.acf-stat-number {
  font-family: var(--ph-font-heading);
  letter-spacing: -0.03em;
}

/* ── Interactive type ───────────────────────────────────── */

button,
.btn,
.btn-primary,
.btn-hero-primary,
.btn-hero-ghost,
.btn-cta,
.nav-link {
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums;
}

/* ── Code ───────────────────────────────────────────────── */

code,
kbd,
samp,
pre {
  font-family: var(--ph-font-mono);
  font-feature-settings: "calt" 0, "liga" 0;
  font-variant-ligatures: none;
}

code,
kbd,
samp {
  font-size: 0.92em;
}

pre {
  line-height: 1.55;
  tab-size: 2;
}

/* ── Hairline weights render muddy below ~15px; hold the floor ── */

@media (max-width: 575px) {
  :root {
    --ph-leading-body: 1.6;
  }

  body {
    letter-spacing: 0;
  }
}