/* PPFont (PP Neue Machina) CSS */

/* ========================================
   FONT FACE DECLARATIONS
   ======================================== */

/* PP Neue Machina - Light (300) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Regular (400) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Medium (500) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Bold (700) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Ultrabold (800) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Ultrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Black (900) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Machina - Ultralight (100) */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Ultralight.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   CSS VARIABLES
   ======================================== */

:root {
  /* PPFont Family */
  --ppfont-family: 'PP Neue Machina', sans-serif;
  
  /* PPFont Weights */
  --ppfont-ultralight: 100;
  --ppfont-light: 300;
  --ppfont-regular: 400;
  --ppfont-medium: 500;
  --ppfont-bold: 700;
  --ppfont-ultrabold: 800;
  --ppfont-black: 900;
  
  /* PPFont Sizes (based on your existing usage) */
  --ppfont-size-xs: 14px;
  --ppfont-size-sm: 16px;
  --ppfont-size-base: 18px;
  --ppfont-size-lg: 22px;
  --ppfont-size-xl: 26px;
  --ppfont-size-2xl: 32px;
  --ppfont-size-3xl: 48px;
  
  /* PPFont Line Heights */
  --ppfont-leading-tight: 1.1;
  --ppfont-leading-normal: 1.2;
  --ppfont-leading-relaxed: 1.4;
  --ppfont-leading-loose: 1.6;
}

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

/* Font Family */
.ppfont {
  font-family: var(--ppfont-family);
}

/* Font Weights */
.ppfont-ultralight {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-ultralight);
}

.ppfont-light {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-light);
}

.ppfont-regular {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-regular);
}

.ppfont-medium {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-medium);
}

.ppfont-bold {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-bold);
}

.ppfont-ultrabold {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-ultrabold);
}

.ppfont-black {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-black);
}

/* Font Sizes */
.ppfont-xs {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-xs);
  line-height: var(--ppfont-leading-normal);
}

.ppfont-sm {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-sm);
  line-height: var(--ppfont-leading-normal);
}

.ppfont-base {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-base);
  line-height: var(--ppfont-leading-normal);
}

.ppfont-lg {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-lg);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-xl {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-xl);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-2xl {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-2xl);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-3xl {
  font-family: var(--ppfont-family);
  font-size: var(--ppfont-size-3xl);
  line-height: var(--ppfont-leading-tight);
}

/* Combined Classes (Weight + Size) */
.ppfont-heading-1 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-black);
  font-size: var(--ppfont-size-3xl);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-heading-2 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-ultrabold);
  font-size: var(--ppfont-size-2xl);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-heading-3 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-bold);
  font-size: var(--ppfont-size-xl);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-heading-4 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-bold);
  font-size: var(--ppfont-size-lg);
  line-height: var(--ppfont-leading-tight);
}

.ppfont-heading-5 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-medium);
  font-size: var(--ppfont-size-base);
  line-height: var(--ppfont-leading-normal);
}

.ppfont-heading-6 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-medium);
  font-size: var(--ppfont-size-sm);
  line-height: var(--ppfont-leading-normal);
}

.ppfont-body {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-regular);
  font-size: var(--ppfont-size-sm);
  line-height: var(--ppfont-leading-relaxed);
}

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

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile First Approach */
@media (max-width: 768px) {
  :root {
    --ppfont-size-xs: 12px;
    --ppfont-size-sm: 14px;
    --ppfont-size-base: 16px;
    --ppfont-size-lg: 18px;
    --ppfont-size-xl: 22px;
    --ppfont-size-2xl: 26px;
    --ppfont-size-3xl: 32px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --ppfont-size-xs: 13px;
    --ppfont-size-sm: 15px;
    --ppfont-size-base: 17px;
    --ppfont-size-lg: 20px;
    --ppfont-size-xl: 24px;
    --ppfont-size-2xl: 28px;
    --ppfont-size-3xl: 40px;
  }
}

@media (min-width: 1025px) {
  :root {
    --ppfont-size-xs: 14px;
    --ppfont-size-sm: 16px;
    --ppfont-size-base: 18px;
    --ppfont-size-lg: 22px;
    --ppfont-size-xl: 26px;
    --ppfont-size-2xl: 32px;
    --ppfont-size-3xl: 48px;
  }
}

/* ========================================
   LEGACY SUPPORT
   ======================================== */

/* For backward compatibility with existing code */
h1, h2, h3 {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-bold);
}

/* Specific overrides for your existing usage */
.ppfont-title {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-ultrabold);
  font-size: var(--ppfont-size-2xl);
  line-height: 42px;
  text-align: center;
}

.ppfont-subtitle {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-bold);
  font-size: var(--ppfont-size-lg);
  line-height: 32px;
}

.ppfont-display {
  font-family: var(--ppfont-family);
  font-weight: var(--ppfont-black);
  font-size: var(--ppfont-size-3xl);
  line-height: 56px;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Preload critical font files */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  preload: true;
}

@font-face {
  font-family: 'PP Neue Machina';
  src: url('../webfonts/NeueMachina-Ultrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  preload: true;
}

/* ========================================
   FALLBACK FONTS
   ======================================== */

/* Fallback for when PPFont is not loaded */
.ppfont-fallback {
  font-family: 'PP Neue Machina', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   ANIMATIONS AND EFFECTS
   ======================================== */

/* Smooth font loading transition */
.ppfont-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.ppfont-loaded {
  opacity: 1;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .ppfont {
    font-family: 'PP Neue Machina', Georgia, serif !important;
  }
  
  /* Ensure good contrast for printing */
  .ppfont {
    color: #000 !important;
  }
}