/* 
 * Doctolab Typography System - Figma Design System
 * Based on Inter font family with defined weights and sizes
 * Reference: https://www.figma.com/design/BHg1zGddCKyW4lUMzTpZMC/Doctolab--Copy-?node-id=8-7518&m=dev
 */

/* ===== FONT FAMILY ===== */
:root {
  --font-family-display: 'Inter', sans-serif;
  --font-family-text: 'Inter', sans-serif;
}

/* ===== FONT WEIGHTS ===== */
:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ===== FONT SIZES ===== */
:root {
  --font-size-xs: 11px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 40px;
}

/* ===== LINE HEIGHTS ===== */
:root {
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-display: 1.3;
}

/* ===== DISPLAY TYPOGRAPHY ===== */

/* Display XL - 40px */
.text-display-xl {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.text-display-xl-bold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-display-xl-semibold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-display-xl-medium {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.text-display-xl-regular {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* Display MD - 30px */
.text-display-md {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.text-display-md-bold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-display-md-semibold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display);
}

.text-display-md-medium {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.text-display-md-regular {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* Display SM - 24px */
.text-display-sm {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.text-display-sm-bold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-display-sm-semibold {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-display-sm-medium {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.text-display-sm-regular {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* ===== TEXT TYPOGRAPHY ===== */

/* Text LG - 20px */
.text-lg {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

.text-lg-bold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.text-lg-semibold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-lg-medium {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.text-lg-regular {
  font-family: var(--font-family-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Text MD - 16px */
.text-md {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.text-md-bold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-md-semibold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-md-medium {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.text-md-regular {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Text SM - 14px */
.text-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-sm-bold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.text-sm-semibold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-sm-medium {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.text-sm-regular {
  font-family: var(--font-family-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Text XS - 11px */
.text-xs {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.text-xs-bold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.text-xs-semibold {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-xs-medium {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.text-xs-regular {
  font-family: var(--font-family-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* ===== UTILITY CLASSES ===== */

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

/* Font Size Utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-display { line-height: var(--line-height-display) !important; }

/* Font Family Utilities */
.font-display { font-family: var(--font-family-display) !important; }
.font-text { font-family: var(--font-family-text) !important; }