/*
 * JobReady Global Design System - Typography Tokens
 * Based on Figma design system specifications
 * 
 * Font Families:
 * - Hind Siliguri: Primary typeface for Bangla content
 * - Roboto: Primary typeface for English, numerals, technical content
 */

:root {
  /* ===========================
     FONT FAMILIES
     =========================== */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Hind Siliguri', sans-serif;
  --font-bangla: 'Hind Siliguri', sans-serif;
  
  /* ===========================
     FONT WEIGHTS
     =========================== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ===========================
     HEADING TYPOGRAPHY TOKENS
     Desktop | Tablet | Mobile
     =========================== */
  
  /* heading/5xl: 44px / 36px / 32px */
  --heading-5xl: 44px;
  --heading-5xl-line-height: 52px;
  --heading-5xl-letter-spacing: -1px;
  --heading-5xl-weight: var(--font-weight-bold);
  
  /* heading/4xl: 40px / 32px / 28px */
  --heading-4xl: 40px;
  --heading-4xl-line-height: 48px;
  --heading-4xl-letter-spacing: -1px;
  --heading-4xl-weight: var(--font-weight-bold);
  
  /* heading/3xl: 36px / 28px / 24px */
  --heading-3xl: 36px;
  --heading-3xl-line-height: 44px;
  --heading-3xl-letter-spacing: -1px;
  --heading-3xl-weight: var(--font-weight-semibold);
  
  /* heading/2xl: 32px / 24px / 24px */
  --heading-2xl: 32px;
  --heading-2xl-line-height: 40px;
  --heading-2xl-letter-spacing: -1px;
  --heading-2xl-weight: var(--font-weight-semibold);
  
  /* heading/xl: 28px / 24px / 24px */
  --heading-xl: 28px;
  --heading-xl-line-height: 36px;
  --heading-xl-letter-spacing: -0.5px;
  --heading-xl-weight: var(--font-weight-semibold);
  
  /* heading/l: 24px / 24px / 20px */
  --heading-l: 24px;
  --heading-l-line-height: 32px;
  --heading-l-letter-spacing: 0;
  --heading-l-weight: var(--font-weight-medium);
  
  /* heading/m: 20px / 20px / 18px */
  --heading-m: 20px;
  --heading-m-line-height: 28px;
  --heading-m-letter-spacing: 0;
  --heading-m-weight: var(--font-weight-medium);
  
  /* ===========================
     BODY TEXT TYPOGRAPHY TOKENS
     Desktop | Tablet | Mobile
     =========================== */
  
  /* body/l: 20px / 16px / 16px */
  --body-l: 20px;
  --body-l-line-height: 32px;
  --body-l-letter-spacing: 0;
  --body-l-weight: var(--font-weight-regular);
  
  /* body/m: 18px / 18px / 16px */
  --body-m: 18px;
  --body-m-line-height: 26px;
  --body-m-letter-spacing: 0;
  --body-m-weight: var(--font-weight-regular);
  
  /* body/s: 16px / 14px / 14px */
  --body-s: 16px;
  --body-s-line-height: 24px;
  --body-s-letter-spacing: 0;
  --body-s-weight: var(--font-weight-regular);
  
  /* body/xs: 14px / 14px / 14px */
  --body-xs: 14px;
  --body-xs-line-height: 20px;
  --body-xs-letter-spacing: 0;
  --body-xs-weight: var(--font-weight-regular);
  
  /* ===========================
     RESPONSIVE BREAKPOINTS
     =========================== */
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 576px;
}

/* ===========================
   RESPONSIVE TYPOGRAPHY
   Tablet (max-width: 768px)
   =========================== */
@media (max-width: 768px) {
  :root {
    /* Heading tokens - Tablet */
    --heading-5xl: 36px;
    --heading-5xl-line-height: 44px;
    
    --heading-4xl: 32px;
    --heading-4xl-line-height: 40px;
    
    --heading-3xl: 28px;
    --heading-3xl-line-height: 36px;
    
    --heading-2xl: 24px;
    --heading-2xl-line-height: 32px;
    
    --heading-xl: 24px;
    --heading-xl-line-height: 32px;
    
    --heading-l: 24px;
    --heading-l-line-height: 32px;
    
    --heading-m: 20px;
    --heading-m-line-height: 28px;
    
    /* Body tokens - Tablet */
    --body-l: 16px;
    --body-l-line-height: 24px;
    
    --body-m: 18px;
    --body-m-line-height: 26px;
    
    --body-s: 14px;
    --body-s-line-height: 20px;
    
    --body-xs: 14px;
    --body-xs-line-height: 20px;
  }
}

/* ===========================
   RESPONSIVE TYPOGRAPHY
   Mobile (max-width: 576px)
   =========================== */
@media (max-width: 576px) {
  :root {
    /* Heading tokens - Mobile */
    --heading-5xl: 32px;
    --heading-5xl-line-height: 40px;
    
    --heading-4xl: 28px;
    --heading-4xl-line-height: 36px;
    
    --heading-3xl: 24px;
    --heading-3xl-line-height: 32px;
    
    --heading-2xl: 24px;
    --heading-2xl-line-height: 32px;
    
    --heading-xl: 24px;
    --heading-xl-line-height: 32px;
    
    --heading-l: 20px;
    --heading-l-line-height: 28px;
    
    --heading-m: 18px;
    --heading-m-line-height: 26px;
    
    /* Body tokens - Mobile */
    --body-l: 16px;
    --body-l-line-height: 24px;
    
    --body-m: 16px;
    --body-m-line-height: 24px;
    
    --body-s: 14px;
    --body-s-line-height: 20px;
    
    --body-xs: 14px;
    --body-xs-line-height: 20px;
  }
}