/* ==========================================================================
   AIRTEL THANKS 2.0 — TYPOGRAPHY SYSTEM & FONT TOKENS
   Source: work/airtel.html & css/airtel.css
   ========================================================================== */

@import url('https://fonts.cdnfonts.com/css/gilroy-bold');

:root {
  /* ── 1. Font Family Stacks ── */
  --font-sans: 'Gilroy-Light', 'Gilroy Light', 'Gilroy', -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Gilroy-Light', 'Gilroy Light', 'Gilroy', monospace;
  --font-display: 'Gilroy-ExtraBold', 'Gilroy ExtraBold', 'Gilroy-Bold', 'Gilroy', sans-serif;

  /* ── 2. Fluid Typography Type Scale (clamp-based) ── */
  --font-size-hero: clamp(2.5rem, 8vw, 7.5rem);
  /* Case Study Main Title */
  --font-size-h1: clamp(2.2rem, 5vw, 4.5rem);
  /* Section Header Level 1 */
  --font-size-h2: clamp(1.75rem, 3.5vw, 3.2rem);
  /* Section Header Level 2 */
  --font-size-h3: clamp(1.25rem, 2.2vw, 2.0rem);
  /* Card Title Level 3 */
  --font-size-body-lg: clamp(1.05rem, 1.6vw, 1.25rem);
  /* Lead Paragraph / Hook */
  --font-size-body: clamp(0.95rem, 1.4vw, 1.05rem);
  /* Standard Body Text */
  --font-size-small: clamp(0.85rem, 1.2vw, 0.92rem);
  /* Subtext & Captions */
  --font-size-mono: clamp(0.72rem, 1vw, 0.82rem);
  /* Technical Metadata & QuickNav */

  /* ── 3. Line Heights ── */
  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.65;
  --line-height-loose: 1.8;

  /* ── 4. Letter Spacings ── */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-caps: 0.08em;
  --letter-spacing-wide: 0.12em;

  /* ── 5. Font Weights ── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 800;
}

/* ── 6. Typography Heading Rules & Utility Classes ── */
h1,
h2,
h3,
h4,
h5,
h6,
.cs-hero-title,
.cs-section-title,
.cs-sec-title,
.cs-card-title,
.showcase-card-title {
  font-family: 'Gilroy-ExtraBold', 'Gilroy ExtraBold', 'Gilroy-Bold', 'Gilroy', sans-serif !important;
  font-weight: 800 !important;
}

.cs-hero-title {
  font-family: 'Gilroy-ExtraBold', 'Gilroy ExtraBold', 'Gilroy-Bold', 'Gilroy', sans-serif !important;
  font-size: var(--font-size-hero);
  font-weight: 800 !important;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.cs-hero-hook,
.cs-prose,
p,
body {
  font-family: 'Gilroy-Light', 'Gilroy Light', 'Gilroy', 'Plus Jakarta Sans', sans-serif !important;
}

.cs-section-title,
.cs-sec-title {
  font-family: 'Gilroy-ExtraBold', 'Gilroy ExtraBold', 'Gilroy-Bold', 'Gilroy', sans-serif !important;
  font-size: var(--font-size-h2);
  font-weight: 800 !important;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-heading);
}

.cs-eyebrow {
  font-family: 'Gilroy-Light', 'Gilroy', sans-serif !important;
  font-size: var(--font-size-mono);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-airtel-red);
}