/* ================================================================
   WMA Aviation - Unified Typography System
   ================================================================
   
   CRITICAL: This file works in conjunction with js/tailwind-config.js
   Both files MUST be kept in sync for consistent typography.
   
   Font Family: Montserrat (luxury aviation standard)
   Weights: 400 (normal), 600 (semibold), 700 (bold)
   
   ================================================================ */

/* Import Montserrat with only the weights we use */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ----------------------------------------------------------------
   FONT FAMILY DEFINITIONS
   Must match the fontFamily in js/tailwind-config.js
   ---------------------------------------------------------------- */
   
/* Universal font stack */
:root {
    --font-stack: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Apply to all elements - using !important to override Tailwind defaults */
* {
    font-family: var(--font-stack) !important;
}

/* Specific element targeting for redundancy */
body, p, div, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label, input, button, select, textarea {
    font-family: var(--font-stack) !important;
}

/* ----------------------------------------------------------------
   FONT WEIGHTS
   Only 3 weights to maintain consistency
   ---------------------------------------------------------------- */
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ----------------------------------------------------------------
   FONT SIZES (Reference - actual sizes in Tailwind config)
   
   RESPONSIVE BODY TEXT PATTERN:
   text-base md:text-lg - 16px → 18px (for comfortable reading)
   
   Full size reference:
   text-base: 16px - Body text mobile
   text-lg:   18px - Body text desktop  
   text-xl:   20px - Subheadings
   text-3xl:  30px - Section headings
   text-4xl:  36px - Page titles
   
   Hero sizes (responsive):
   text-4xl md:text-5xl lg:text-6xl - 36px → 48px → 64px
   ---------------------------------------------------------------- */

/* Default body settings */
body {
    font-family: var(--font-stack);
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------
   IMPORTANT NOTES:
   
   1. This CSS file handles font-family and font-weight
   2. js/tailwind-config.js handles font sizes via Tailwind classes
   3. Both files must use the same font stack
   4. Changes to font family must be made in BOTH files
   ---------------------------------------------------------------- */