/* 
 * Global Typography System
 * 
 * This file contains CSS custom properties (variables) for all typography
 * used throughout the Quencode website. This serves as the single source
 * of truth for font families, sizes, and weights.
 * 
 * Usage:
 * - Use CSS variables in custom CSS: font-size: var(--font-size-base);
 * - Works alongside Tailwind utility classes
 * - Maintain consistency across all pages
 */

:root {
  /* ============================================
     FONT FAMILIES
     ============================================ */
  
  /* Primary font - Used for body text and most content */
  --font-primary: 'Inter', sans-serif;
  
  /* Secondary font - Used for headings, logos, and emphasis */
  --font-secondary: 'Montserrat', sans-serif;

  /* Tertiary font - Used for services page and specific sections */
  --font-tertiary: 'Poppins', sans-serif;


  /* ============================================
     FONT SIZES - Semantic Names
     ============================================ */
  
  /* Base sizes (matching Tailwind scale) */
  --font-size-xs: 0.75rem;        /* 12px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 1.875rem;      /* 30px */
  --font-size-4xl: 2.25rem;        /* 36px */
  --font-size-5xl: 3rem;           /* 48px */
  
  /* Custom sizes used throughout the site */
  --font-size-0-7rem: 0.7rem;     /* 11.2px */
  --font-size-0-8rem: 0.8rem;     /* 12.8px */
  --font-size-0-9rem: 0.9rem;     /* 14.4px */
  --font-size-1-1rem: 1.1rem;     /* 17.6px */
  --font-size-1-2rem: 1.2rem;     /* 19.2px */
  --font-size-1-8rem: 1.8rem;    /* 28.8px */
  --font-size-2-5rem: 2.5rem;     /* 40px */
  --font-size-4rem: 4rem;         /* 64px */
  --font-size-4-5rem: 4.5rem;     /* 72px - Portfolio titles */
  --font-size-6rem: 6rem;         /* 96px */
  
  /* Semantic size names for common use cases */
  --font-size-hero: 4rem;                    /* Hero section headings */
  --font-size-hero-responsive: clamp(3rem, 8vw, 8rem);  /* Responsive hero */
  --font-size-hero-subtitle: clamp(1.25rem, 3vw, 2rem); /* Hero subtitle */
  --font-size-portfolio-title: 4.5rem;       /* Portfolio tile titles */
  --font-size-portfolio-date: 3rem;          /* Portfolio tile dates */
  --font-size-stat-number: 4rem;             /* Statistics numbers */
  --font-size-stat-label: 1.125rem;         /* Statistics labels */
  --font-size-nav: 0.875rem;                 /* Navigation links */
  --font-size-footer-heading: 1rem;          /* Footer section headings */
  --font-size-footer-link: 0.875rem;        /* Footer links */
  --font-size-copyright: 0.875rem;          /* Copyright text */


  /* ============================================
     FONT WEIGHTS
     ============================================ */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;


  /* ============================================
     LINE HEIGHTS (Optional - for consistency)
     ============================================ */
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
}

/* Services page font - Poppins */
body.services-page,
.services-page body {
  font-family: var(--font-tertiary);
}