/* ==========================================================================
   PROTEINFUEL - DESIGN SYSTEM TYPOGRAPHY SYSTEM
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Ponomar&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

/* --------------------------------------------------------------------------
   1. GLOBAL FONT FAMILY DEFINITIONS & VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* 3 Core Font Family Variables */
  --font-raleway: "Raleway", system-ui, -apple-system, sans-serif;
  --font-playfair: "Playfair Display", Georgia, serif;
  --font-ponomar: "Ponomar", "Playfair Display", Georgia, serif;

  /* Short Font Aliases */
  --rail: var(--font-raleway);
  --playfair: var(--font-playfair);
  --ponomar: var(--font-ponomar);

  /* Semantic Font Family Mapping */
  --font-primary: var(--font-raleway);
  --font-serif: var(--font-playfair);
  --font-heading: var(--font-ponomar);

  /* Font Sizes - Headings (Fluid Scale) */
  --fs-hero-title: clamp(
    75px,
    7vw,
    120px
  ); /* 75px - 120px (Main Hero 'Perfect Meal' Title) */
  --fs-h1: clamp(60px, 5.5vw, 96px); /* 60px - 96px  (Large Display Headings) */
  --fs-h2: clamp(40px, 4vw, 60px); /* 40px - 60px  (Standard Section Title) */
  --fs-h3: clamp(28px, 2.5vw, 40px); /* 28px - 40px  (Card & Box Headers) */
  --fs-h4: clamp(
    22px,
    2vw,
    32px
  ); /* 22px - 32px  (Sub-headers & Card Titles) */
  --fs-h5: clamp(18px, 1.5vw, 24px); /* 18px - 24px  (Small Feature Headers) */
  --fs-h6: clamp(16px, 1.2vw, 20px); /* 16px - 20px  (Sub-labels & Captions) */

  /* Font Sizes - Body & Components */
  --fs-body-lead: clamp(
    18px,
    1.4vw,
    24px
  ); /* 18px - 24px  (Section Descriptions / Subtitles) */
  --fs-body: 16px; /* 16px (Standard Body Text) */
  --fs-body-lg: 20px; /* 20px (Featured Paragraph Copy) */
  --fs-body-sm: 14px; /* 14px (Secondary Details & Metadata) */
  --fs-eyebrow: 18px; /* 18px (Top Eyebrow Badge Spans) */
  --fs-button: 16px; /* 16px (Interactive Action Buttons) */

  /* Line Height Variables */
  --lh-tight: 0.85; /* Tight Display Line Height (0.85) */
  --lh-h1: 0.95; /* H1 Line Height (0.95) */
  --lh-h2: 1.12; /* H2 Line Height (1.12) */
  --lh-h3: 1.2; /* H3 Line Height (1.20) */
  --lh-h4: 1.3; /* H4 Line Height (1.30) */
  --lh-h5: 1.35; /* H5 Line Height (1.35) */
  --lh-h6: 1.4; /* H6 Line Height (1.40) */
  --lh-body-lead: 1.35; /* Lead Paragraph Line Height (1.35) */
  --lh-body: 1.5; /* Standard Body Line Height (1.50) */
  --lh-body-lg: 1.45; /* Large Body Copy Line Height (1.45) */
  --lh-body-sm: 1.4; /* Small Text Line Height (1.40) */
  --lh-eyebrow: 1; /* Eyebrow Badge Line Height (1.00) */
  --lh-button: 1.2; /* Button Line Height (1.20) */
}

/* --------------------------------------------------------------------------
   2. BASE HTML ELEMENT TYPOGRAPHY & EXPLANATORY COMMENTS
   -------------------------------------------------------------------------- */

/* H1 Tag & .h1 / .text-hero-main Class:
   - Usage: Main Hero 'Perfect Meal' & Primary Page Headlines
   - Font: Ponomar / Playfair Display (Serif Decorative)
   - Size Range: 75px on mobile to 120px on desktop (clamp)
   - Weight: 400 | Line-Height: 0.85 | Letter-Spacing: -5px */
h1,
.h1,
.text-hero-main {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-title);
  font-weight: 400;
  letter-spacing: -5px;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 24px;
}

/* H2 Tag & .h2 / .text-section-title Class:
   - Usage: Primary Section Headings (Market Opportunity, Offerings, FAQ, USP)
   - Font: Ponomar / Playfair Display
   - Size Range: 40px on mobile to 60px on desktop (clamp)
   - Weight: 400 | Line-Height: var(--lh-h2) (1.12) | Letter-Spacing: -2.5px */
h2,
.h2,
.text-section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -2.5px;
  line-height: var(--lh-h2);
  color: inherit;
  margin-top: 0;
  margin-bottom: 20px;
}

/* H3 Tag & .h3 / .text-card-title Class:
   - Usage: Card Titles (Market 4 Cards, Promise 6 Cards, Target Audience, Meal Cards)
   - Font: Playfair Display (Serif)
   - Size Range: 28px on mobile to 40px on desktop (clamp)
   - Weight: 500-600 | Line-Height: var(--lh-h3) (1.20) | Letter-Spacing: -0.8px */
h3,
.h3,
.text-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.8px;
  line-height: var(--lh-h3);
  color: inherit;
  margin-top: 0;
  margin-bottom: 16px;
}

/* H4 Tag & .h4 / .text-subtitle-header Class:
   - Usage: Secondary Sub-headers, Step Indicators, & Medium Feature Cards
   - Font: Playfair Display (Serif)
   - Size Range: 22px to 32px (clamp)
   - Weight: 600 | Line-Height: var(--lh-h4) (1.30) | Letter-Spacing: -0.5px */
h4,
.h4,
.text-subtitle-header {
  font-family: var(--font-raleway);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: var(--lh-h4);
  color: inherit;
  margin-top: 0;
  margin-bottom: 12px;
}

/* H5 Tag & .h5 / .text-group-header Class:
   - Usage: Table Columns, Grouping Labels, & Small Accordion Header Buttons
   - Font: Playfair Display (Serif)
   - Size Range: 18px to 24px (clamp)
   - Weight: 600 | Line-Height: var(--lh-h5) (1.35) */
h5,
.h5,
.text-group-header {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-h5);
  color: inherit;
  margin-top: 0;
  margin-bottom: 10px;
}

/* H6 Tag & .h6 / .text-micro-header Class:
   - Usage: Micro Features, Pill Badges, & Metadata Labels
   - Font: Raleway (Sans-Serif)
   - Size Range: 16px to 20px (clamp)
   - Weight: 700 | Line-Height: var(--lh-h6) (1.40) */
h6,
.h6,
.text-micro-header {
  font-family: var(--font-primary);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--lh-h6);
  color: inherit;
  margin-top: 0;
  margin-bottom: 8px;
}

/* Paragraph (P) Tag & .text-body / .text-body-lg Classes:
   - Usage: Body Copy Text across all cards and section descriptions
   - Font: Raleway (Sans-Serif)
   - Size: 16px (or 20px for .text-body-lg)
   - Weight: 300-400 | Line-Height: var(--lh-body) (1.50) */
p,
.text-body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: inherit;
  margin-top: 0;
  margin-bottom: 1rem;
}

.text-body-lg {
  font-family: var(--font-primary);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: var(--lh-body-lg);
}

.text-body-sm {
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-body-sm);
}

/* Lead Paragraph (.lead / .text-lead):
   - Usage: Subtitles & Descriptions under main section title headers
   - Font: Raleway (Sans-Serif) Italic
   - Size Range: 18px on mobile to 24px on desktop (clamp)
   - Weight: 300 | Line-Height: var(--lh-body-lead) (1.35) | Opacity: 0.85 */
.lead,
.text-lead {
  font-family: var(--font-primary);
  font-size: var(--fs-body-lead);
  font-weight: 300;
  font-style: italic;
  line-height: var(--lh-body-lead);
  letter-spacing: -0.5px;
  opacity: 0.88;
}

/* --------------------------------------------------------------------------
   3. UTILITY TYPOGRAPHY CLASSES FOR HTML IMPLEMENTATION
   -------------------------------------------------------------------------- */

/* Eyebrow Label Span (.text-eyebrow / .eyebrow):
   - Usage: Green Section Badge Text (e.g. 'THE FORMULA OF', 'MARKET OPPORTUNITY')
   - Font: Raleway | Size: 18px | Weight: 800 | Line-Height: var(--lh-eyebrow) (1.0) */
.eyebrow,
.text-eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  line-height: var(--lh-eyebrow);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--green);
  display: inline-block;
  margin-bottom: 16px;
}

/* Hero Title Sub-phrase ('The Formula of') */
.text-hero-eyebrow {
  font-family: var(--font-primary);
  font-size: clamp(40px, 3.2vw, 60px);
  letter-spacing: -2.4px;
  font-weight: 300;
  color: var(--ink);
}

.text-hero-eyebrow em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82em;
}

/* Font Family Helper Classes */
.font-heading {
  font-family: var(--font-heading) !important;
}
.font-serif {
  font-family: var(--font-serif) !important;
}
.font-sans {
  font-family: var(--font-primary) !important;
}

/* Font Weight Helper Classes */
.fw-light {
  font-weight: 300 !important;
}
.fw-normal {
  font-weight: 400 !important;
}
.fw-medium {
  font-weight: 500 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-bold {
  font-weight: 700 !important;
}
.fw-extrabold {
  font-weight: 800 !important;
}

/* Text Style & Alignment Helper Classes */
.text-italic {
  font-style: italic !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}

/* Links & Interactive Action Text */
a {
  color: var(--green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--lime);
}