/* ============================================================
   CRO-Labs Typography Theme System
   Generated: 2026-03-15
   
   Purpose: Enforce consistent typography across all pages
   and sections. Import via layout.js (already linked).
   
   Usage: Apply these classes/variables instead of hardcoding
   font sizes in inline styles or component CSS.
   ============================================================ */

/* --- Typography Custom Properties --- */
:root {
  /* Font Families */
  --font-heading: 'Mazzard', 'Poppins', -apple-system, sans-serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Fira Code', monospace;

  /* Font Sizes — Desktop */
  --text-hero: clamp(32px, 5vw, 56px);        /* Hero headlines */
  --text-h1: clamp(28px, 4vw, 44px);           /* Page titles */
  --text-h2: clamp(24px, 3.5vw, 36px);         /* Section titles */
  --text-h3: clamp(20px, 3vw, 28px);           /* Sub-section titles */
  --text-h4: 18px;                              /* Card titles, feature headings */
  --text-h5: 16px;                              /* Minor headings */
  --text-body: 15px;                            /* Body / paragraph text */
  --text-body-sm: 14px;                         /* Secondary body text */
  --text-caption: 13px;                         /* Captions, descriptions */
  --text-small: 12px;                           /* Small text, metadata */
  --text-xs: 11px;                              /* Badges, labels, tags */
  --text-xxs: 10px;                             /* Micro text, category labels */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.15;                        /* Headings */
  --leading-snug: 1.3;                          /* Sub-headings */
  --leading-normal: 1.5;                        /* Body text */
  --leading-relaxed: 1.6;                       /* Descriptions, paragraphs */
  --leading-loose: 1.7;                         /* Long-form text */

  /* Letter Spacing */
  --tracking-tight: -0.01em;                    /* Large headings */
  --tracking-normal: 0;                         /* Body text */
  --tracking-wide: 0.02em;                      /* Buttons, labels */
  --tracking-wider: 0.05em;                     /* Uppercase labels */
  --tracking-widest: 0.1em;                     /* Badges, tags */

  /* Button Sizes */
  --btn-text-lg: 16px;                          /* Primary CTA buttons */
  --btn-text-md: 15px;                          /* Standard buttons */
  --btn-text-sm: 14px;                          /* Secondary buttons */
  --btn-text-xs: 13px;                          /* Small/inline buttons */
  --btn-weight: 600;                            /* Default button weight */

  /* Nav Sizes */
  --nav-text: 15px;                             /* Navigation links */
  --nav-weight: 500;                            /* Navigation weight */
}

/* ============================================================
   HEADING STYLES
   Apply via class or use as reference for inline styles.
   All headings use --font-heading (Mazzard/Poppins).
   ============================================================ */

/* Hero headline — largest, used once per page max */
.t-hero {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--dark, #231F20);
}

/* H1 — page title level */
.t-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--dark, #231F20);
}

/* H2 — section title level */
.t-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

/* H3 — sub-section title */
.t-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

/* H4 — card title / feature heading */
.t-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

/* H5 — minor heading */
.t-h5 {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

/* ============================================================
   BODY TEXT STYLES
   ============================================================ */

/* Standard body text */
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary, #888);
}

/* Slightly smaller body text */
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary, #888);
}

/* Paragraph text — relaxed for readability */
.t-paragraph {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--text-secondary, #888);
  max-width: 600px;
}

/* Caption text */
.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary, #888);
}

/* ============================================================
   SUBHEADLINE / OVERLINE
   Small uppercase text above section titles.
   ============================================================ */

.t-overline {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green, #1E5BFF);
  line-height: 1;
}

.t-overline-sm {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green, #1E5BFF);
  line-height: 1;
}

/* ============================================================
   BUTTON TEXT STYLES
   ============================================================ */

.t-btn {
  font-family: var(--font-body);
  font-size: var(--btn-text-md);
  font-weight: var(--btn-weight);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.t-btn-lg {
  font-family: var(--font-body);
  font-size: var(--btn-text-lg);
  font-weight: var(--btn-weight);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.t-btn-sm {
  font-family: var(--font-body);
  font-size: var(--btn-text-sm);
  font-weight: var(--btn-weight);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.t-btn-xs {
  font-family: var(--font-body);
  font-size: var(--btn-text-xs);
  font-weight: var(--btn-weight);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

/* ============================================================
   NAVIGATION TEXT
   ============================================================ */

.t-nav {
  font-family: var(--font-body);
  font-size: var(--nav-text);
  font-weight: var(--nav-weight);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
}

/* ============================================================
   CARD STYLES — Typography for section/product cards
   ============================================================ */

.t-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

.t-card-title-sm {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--dark, #231F20);
}

.t-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary, #888);
}

/* ============================================================
   STAT / NUMBER STYLES
   ============================================================ */

.t-stat-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--dark, #231F20);
}

.t-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted, #BBB);
}

/* ============================================================
   PRICE STYLES
   ============================================================ */

.t-price {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--dark, #231F20);
}

.t-price-sm {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--dark, #231F20);
}

.t-price-original {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--text-muted, #BBB);
  text-decoration: line-through;
}

/* ============================================================
   BADGE / TAG STYLES
   ============================================================ */

.t-badge {
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
}

.t-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.t-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--text-muted, #BBB);
}

.t-breadcrumb-active {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--dark, #231F20);
}

/* ============================================================
   CODE / MONOSPACE
   ============================================================ */

.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   UTILITY CLASSES — Quick typography helpers
   ============================================================ */

/* Weight utilities */
.fw-regular { font-weight: var(--weight-regular) !important; }
.fw-medium { font-weight: var(--weight-medium) !important; }
.fw-semibold { font-weight: var(--weight-semibold) !important; }
.fw-bold { font-weight: var(--weight-bold) !important; }

/* Size utilities */
.fs-hero { font-size: var(--text-hero) !important; }
.fs-h1 { font-size: var(--text-h1) !important; }
.fs-h2 { font-size: var(--text-h2) !important; }
.fs-h3 { font-size: var(--text-h3) !important; }
.fs-h4 { font-size: var(--text-h4) !important; }
.fs-h5 { font-size: var(--text-h5) !important; }
.fs-body { font-size: var(--text-body) !important; }
.fs-body-sm { font-size: var(--text-body-sm) !important; }
.fs-caption { font-size: var(--text-caption) !important; }
.fs-small { font-size: var(--text-small) !important; }
.fs-xs { font-size: var(--text-xs) !important; }
.fs-xxs { font-size: var(--text-xxs) !important; }

/* Family utilities */
.ff-heading { font-family: var(--font-heading) !important; }
.ff-body { font-family: var(--font-body) !important; }
.ff-mono { font-family: var(--font-mono) !important; }

/* Line-height utilities */
.lh-tight { line-height: var(--leading-tight) !important; }
.lh-snug { line-height: var(--leading-snug) !important; }
.lh-normal { line-height: var(--leading-normal) !important; }
.lh-relaxed { line-height: var(--leading-relaxed) !important; }
.lh-loose { line-height: var(--leading-loose) !important; }

/* Tracking utilities */
.ls-tight { letter-spacing: var(--tracking-tight) !important; }
.ls-normal { letter-spacing: var(--tracking-normal) !important; }
.ls-wide { letter-spacing: var(--tracking-wide) !important; }
.ls-wider { letter-spacing: var(--tracking-wider) !important; }

/* Text transform */
.tt-upper { text-transform: uppercase !important; }
.tt-lower { text-transform: lowercase !important; }
.tt-caps { text-transform: capitalize !important; }
.tt-none { text-transform: none !important; }

/* ============================================================
   RESPONSIVE OVERRIDES — Mobile typography adjustments
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --text-hero: clamp(28px, 7vw, 40px);
    --text-h1: clamp(24px, 6vw, 36px);
    --text-h2: clamp(22px, 5vw, 32px);
    --text-h3: clamp(18px, 4.5vw, 24px);
    --text-h4: 16px;
    --text-h5: 15px;
    --text-body: 14px;
    --text-body-sm: 13px;
    --text-caption: 12px;
    --text-small: 11px;
    --text-xs: 10px;
    --text-xxs: 9px;

    --btn-text-lg: 15px;
    --btn-text-md: 14px;
    --btn-text-sm: 13px;
    --btn-text-xs: 12px;

    --nav-text: 14px;
  }

  .t-paragraph {
    max-width: 100%;
  }

  .t-stat-value {
    font-size: 22px;
  }

  .t-price {
    font-size: 28px;
  }

  .t-price-sm {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-hero: clamp(24px, 8vw, 32px);
    --text-h1: clamp(22px, 7vw, 30px);
    --text-h2: clamp(20px, 6vw, 26px);
    --text-h3: clamp(17px, 5vw, 22px);
    --text-h4: 15px;
    --text-h5: 14px;
  }

  .t-stat-value {
    font-size: 20px;
  }

  .t-price {
    font-size: 24px;
  }
}