/*
 * ═══════════════════════════════════════════════════════════════
 * COREDEVEX — TYPOGRAPHY
 * @font-face declarations + type scale utility classes
 * Fonts: Plus Jakarta Sans (display) · Inter (body) · JetBrains Mono
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   FONT DECLARATIONS — Self-hosted woff2 (all three families)
   ───────────────────────────────────────────────────────────── */

/* Inter (body) */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Plus Jakarta Sans (display / headings) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono (metrics + code) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ─────────────────────────────────────────────────────────────
   TYPE SCALE — Utility classes
   ───────────────────────────────────────────────────────────── */

/* Hero — Plus Jakarta Sans 700, 80px desktop / 44px mobile */
.type-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--cdx-white);
}

/* Display — Plus Jakarta Sans 700, 56px desktop / 36px mobile */
.type-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cdx-white);
}

/* H2 — Plus Jakarta Sans 700, 40px desktop / 28px mobile */
.type-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cdx-white);
}

/* H3 — Inter 600, 26px */
.type-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cdx-white);
}

/* H4 — Inter 500, 18px */
.type-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-h4);
  line-height: 1.4;
  color: var(--cdx-white);
}

/* Body Large — Inter 400, 18px */
.type-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--cdx-mist);
}

/* Body — Inter 400, 16px */
.type-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--cdx-mist);
}

/* Small — Inter 400, 14px */
.type-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--cdx-mist);
}

/* Caption — Inter 500, 11px, uppercase */
.type-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cdx-ghost);
}

/* Metric — JetBrains Mono 300, 56px */
.type-metric {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-metric);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cdx-white);
}

/* Code — JetBrains Mono 400 */
.type-code {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--cdx-mist);
}

/* Tagline variants */
.cdx-tagline {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--cdx-tagline);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.cdx-tagline--footer {
  font-size: 12px;
  color: rgba(90, 127, 160, 0.5);
}

.cdx-tagline--cta {
  font-size: 13px;
  color: rgba(90, 127, 160, 0.7);
  text-align: center;
  margin-top: 32px;
}


/* ─────────────────────────────────────────────────────────────
   MOBILE TYPE SCALE OVERRIDES
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .type-hero    { font-size: 44px; }
  .type-display { font-size: 36px; }
  .type-h2      { font-size: 28px; }
  .type-h3      { font-size: 22px; }
}


/* ─────────────────────────────────────────────────────────────
   LIGHT SECTION TEXT COLOUR OVERRIDES
   ───────────────────────────────────────────────────────────── */

.light-section .type-hero,
.light-section .type-display,
.light-section .type-h2,
.light-section .type-h3,
.light-section .type-h4 {
  color: var(--light-text);
}

.light-section .type-body-lg,
.light-section .type-body,
.light-section .type-small {
  color: var(--light-muted);
}

.light-section .type-caption {
  color: var(--light-ghost);
}