/* ============================================
   TYPOGRAPHY - LEXEND FONT SYSTEM
   ============================================ */

/* 
   Lexend is a font designed to reduce visual stress and improve 
   reading performance. Available weights: 100-900
*/

/* ============================================
   FONT SMOOTHING & RENDERING OPTIMIZATIONS
   ============================================ */

/* Apply globally to all elements for consistent rendering */
*,
*::before,
*::after {
  /* WebKit-based browsers (Chrome, Safari, Edge) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Better text rendering */
  text-rendering: optimizeLegibility;
  
  /* Subpixel antialiasing for sharper text on non-retina displays */
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

/* Enhanced rendering for body and main text elements */
body,
input,
textarea,
select,
button {
  /* Optimal font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Enable OpenType features for better typography */
  font-feature-settings: 
    "kern" 1,     /* Kerning */
    "liga" 1,     /* Standard ligatures */
    "calt" 1;     /* Contextual alternates */
  
  /* Font variant settings */
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  
  /* Auto-adjust font based on size (if supported) */
  font-optical-sizing: auto;
  
  /* Prevent synthetic bold/italic (use actual font weights) */
  font-synthesis: none;
}

/* Headings get extra crisp rendering */
h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Better kerning for headings */
  font-feature-settings: 
    "kern" 1,
    "liga" 1,
    "dlig" 0;  /* Disable discretionary ligatures for headings */
}

/* Optimize small text (captions, labels) */
small,
.small,
.caption,
.caption-sm,
.label-sm {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision;
}

/* ============================================
   SCREEN-SPECIFIC OPTIMIZATIONS
   ============================================ */

/* High DPI / Retina Displays - Enhanced smoothing */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: auto;
  }
}

/* Standard/Low DPI Displays - Subpixel rendering */
@media only screen and (-webkit-max-device-pixel-ratio: 1.99),
       only screen and (max-resolution: 191dpi) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: auto;
  }
}

/* Windows ClearType optimization */
@media screen and (-ms-high-contrast: active), 
       screen and (-ms-high-contrast: none) {
  body {
    text-rendering: optimizeSpeed;
  }
}

/* ============================================
   UTILITY CLASSES FOR CUSTOM RENDERING
   ============================================ */

/* Force antialiasing */
.font-smooth-antialiased {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Force subpixel antialiasing */
.font-smooth-subpixel {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
}

/* Optimize for legibility */
.text-legible {
  text-rendering: optimizeLegibility !important;
}

/* Optimize for speed */
.text-speed {
  text-rendering: optimizeSpeed !important;
}

/* Geometric precision */
.text-precise {
  text-rendering: geometricPrecision !important;
}

/* ============================================
   FONT WEIGHT VARIABLES
   ============================================ */
:root {
  /* Lexend Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --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;
}

/* ============================================
   FONT WEIGHT UTILITY CLASSES
   ============================================ */

/* Thin - 100 */
.font-thin,
.fw-100 {
  font-weight: 100 !important;
}

/* Extra Light - 200 */
.font-extralight,
.fw-200 {
  font-weight: 200 !important;
}

/* Light - 300 */
.font-light,
.fw-300 {
  font-weight: 300 !important;
}

/* Normal/Regular - 400 */
.font-normal,
.font-regular,
.fw-400 {
  font-weight: 400 !important;
}

/* Medium - 500 */
.font-medium,
.fw-500 {
  font-weight: 500 !important;
}

/* Semibold - 600 */
.font-semibold,
.fw-600 {
  font-weight: 600 !important;
}

/* Bold - 700 */
.font-bold,
.fw-700 {
  font-weight: 700 !important;
}

/* Extra Bold - 800 */
.font-extrabold,
.fw-800 {
  font-weight: 800 !important;
}

/* Black - 900 */
.font-black,
.fw-900 {
  font-weight: 900 !important;
}

/* ============================================
   FONT SIZE UTILITY CLASSES
   ============================================ */

/* Extra Small - 12px */
.text-xs {
  font-size: 0.75rem !important;
}

/* Small - 13px */
.text-sm {
  font-size: 0.8125rem !important;
}

/* Base - 14px */
.text-base {
  font-size: 0.875rem !important;
}

/* Medium - 16px */
.text-md {
  font-size: 1rem !important;
}

/* Large - 18px */
.text-lg {
  font-size: 1.125rem !important;
}

/* Extra Large - 20px */
.text-xl {
  font-size: 1.25rem !important;
}

/* 2XL - 24px */
.text-2xl {
  font-size: 1.5rem !important;
}

/* 3XL - 30px */
.text-3xl {
  font-size: 1.875rem !important;
}

/* 4XL - 36px */
.text-4xl {
  font-size: 2.25rem !important;
}

/* 5XL - 48px */
.text-5xl {
  font-size: 3rem !important;
}

/* 6XL - 60px */
.text-6xl {
  font-size: 3.75rem !important;
}

/* ============================================
   COMBINED WEIGHT + SIZE CLASSES
   ============================================ */

/* Heading Presets */
.heading-display {
  font-weight: var(--font-weight-bold);
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.heading-xl {
  font-weight: var(--font-weight-semibold);
  font-size: 2.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.heading-lg {
  font-weight: var(--font-weight-semibold);
  font-size: 1.875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.heading-md {
  font-weight: var(--font-weight-semibold);
  font-size: 1.5rem;
  line-height: 1.35;
}

.heading-sm {
  font-weight: var(--font-weight-medium);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Body Text Presets */
.body-lg {
  font-weight: var(--font-weight-normal);
  font-size: 1.125rem;
  line-height: 1.7;
}

.body-base {
  font-weight: var(--font-weight-normal);
  font-size: 1rem;
  line-height: 1.6;
}

.body-sm {
  font-weight: var(--font-weight-normal);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Caption/Small Text Presets */
.caption {
  font-weight: var(--font-weight-normal);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.caption-sm {
  font-weight: var(--font-weight-normal);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Label Presets */
.label {
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.label-sm {
  font-weight: var(--font-weight-medium);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================
   LINE HEIGHT UTILITIES
   ============================================ */

.leading-none {
  line-height: 1 !important;
}

.leading-tight {
  line-height: 1.25 !important;
}

.leading-snug {
  line-height: 1.375 !important;
}

.leading-normal {
  line-height: 1.5 !important;
}

.leading-relaxed {
  line-height: 1.625 !important;
}

.leading-loose {
  line-height: 2 !important;
}

/* ============================================
   LETTER SPACING UTILITIES
   ============================================ */

.tracking-tighter {
  letter-spacing: -0.05em !important;
}

.tracking-tight {
  letter-spacing: -0.025em !important;
}

.tracking-normal {
  letter-spacing: 0 !important;
}

.tracking-wide {
  letter-spacing: 0.025em !important;
}

.tracking-wider {
  letter-spacing: 0.05em !important;
}

.tracking-widest {
  letter-spacing: 0.1em !important;
}

/* ============================================
   TEXT TRANSFORM UTILITIES
   ============================================ */

.uppercase {
  text-transform: uppercase !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.normal-case {
  text-transform: none !important;
}

/* ============================================
   TEXT ALIGNMENT UTILITIES
   ============================================ */

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}