/* San Valentín - Typography and Font Loading */

/* Google Fonts - Romantic and elegant fonts */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* Font Face Declarations with Fallbacks */

/* Primary Decorative Font - Dancing Script for romantic titles */
@font-face {
  font-family: 'RomanticTitle';
  src: local('Dancing Script'), local('DancingScript-Regular');
  font-display: swap; /* Prevents FOIT (Flash of Invisible Text) */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'RomanticTitle';
  src: local('Dancing Script Medium'), local('DancingScript-Medium');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'RomanticTitle';
  src: local('Dancing Script SemiBold'), local('DancingScript-SemiBold');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'RomanticTitle';
  src: local('Dancing Script Bold'), local('DancingScript-Bold');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

/* Secondary Elegant Font - Playfair Display for headings */
@font-face {
  font-family: 'ElegantHeading';
  src: local('Playfair Display'), local('PlayfairDisplay-Regular');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ElegantHeading';
  src: local('Playfair Display Medium'), local('PlayfairDisplay-Medium');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'ElegantHeading';
  src: local('Playfair Display SemiBold'), local('PlayfairDisplay-SemiBold');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'ElegantHeading';
  src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ElegantHeading';
  src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

/* Body Text Font - Lora for readable content */
@font-face {
  font-family: 'ReadableBody';
  src: local('Lora'), local('Lora-Regular');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ReadableBody';
  src: local('Lora Medium'), local('Lora-Medium');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'ReadableBody';
  src: local('Lora SemiBold'), local('Lora-SemiBold');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'ReadableBody';
  src: local('Lora Italic'), local('Lora-Italic');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

/* Font Stack Definitions with Comprehensive Fallbacks */

/* Romantic Title Stack - For main titles and romantic headings */
.font-romantic-title {
  font-family: 'RomanticTitle', 'Dancing Script', 'Brush Script MT', cursive, 
               'Apple Chancery', 'Lucida Handwriting', 'Segoe Script', 
               'Times New Roman', serif;
}

/* Elegant Heading Stack - For section headings and important text */
.font-elegant-heading {
  font-family: 'ElegantHeading', 'Playfair Display', 'Times New Roman', 
               'Georgia', 'Garamond', 'Book Antiqua', serif;
}

/* Readable Body Stack - For body text and descriptions */
.font-readable-body {
  font-family: 'ReadableBody', 'Lora', 'Georgia', 'Times New Roman', 
               'Cambria', 'Book Antiqua', serif;
}

/* System Font Stack - Fallback for performance-critical scenarios */
.font-system {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
               'Helvetica Neue', Arial, sans-serif;
}

/* CSS Custom Properties for Typography Scale */
:root {
  /* Font Families */
  --font-romantic: 'RomanticTitle', 'Dancing Script', cursive;
  --font-elegant: 'ElegantHeading', 'Playfair Display', serif;
  --font-body: 'ReadableBody', 'Lora', serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes - Fluid Typography */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --font-size-5xl: clamp(3.5rem, 2.5rem + 5vw, 5rem);
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Typography Utility Classes */

/* Font Size Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

/* Line Height Classes */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Letter Spacing Classes */
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Font Weight Classes */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Semantic Typography Classes */
.title-romantic {
  font-family: var(--font-romantic);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
}

.heading-elegant {
  font-family: var(--font-elegant);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.body-readable {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
}

.text-romantic-italic {
  font-family: var(--font-elegant);
  font-style: italic;
  font-weight: var(--font-weight-normal);
}

/* Performance Optimizations */

/* Preload critical font files */
.font-preload-romantic::before {
  content: '';
  font-family: var(--font-romantic);
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.font-preload-elegant::before {
  content: '';
  font-family: var(--font-elegant);
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    font-variation-settings: normal !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --font-weight-normal: 500;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
  }
}