/**
 * Beach Luxe Vacations - Typography System
 * 
 * Centralized font configuration inspired by Apple.com's approach.
 * Apple uses SF Pro Display (headlines) and SF Pro Text (body).
 * 
 * We use:
 * - Inter: Body text (similar to SF Pro Text) - excellent readability
 * - Plus Jakarta Sans: Display/headlines (similar to SF Pro Display)
 * 
 * FONT CUSTOMIZATION:
 * To change fonts, update the following:
 * 1. Update theme.json "fonts.google" array
 * 2. Update CSS variables below
 * 
 * ============================================================================
 */

/* ==========================================================================
   Font Face Definitions (Local fallbacks)
   ========================================================================== */

/* Font variables are defined in variables.css - this file uses them */

/* ==========================================================================
   Base Typography
   ========================================================================== */

html {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* font-feature-settings: 'kern' 1, 'liga' 1; - Disabled, can cause character issues */
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
}

/* ==========================================================================
   Headings - Using Display Font
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin-top: 0;
}

/* Display headlines - hero sections */
.display-xl {
    font-size: var(--text-display-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
}

.display-lg {
    font-size: var(--text-display-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
}

.display-md {
    font-size: var(--text-display-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

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

/* Standard headings */
h1, .h1 {
    font-size: var(--text-4xl);
    margin-bottom: 1.5rem;
}

h2, .h2 {
    font-size: 42.5px;
    margin-bottom: 1.25rem;
}

h3, .h3 {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

h4, .h4 {
    font-size: var(--text-xl);
    margin-bottom: 0.75rem;
}

h5, .h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Body Text Styles
   ========================================================================== */

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.lead {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text-light);
}

.small, small {
    font-size: var(--text-sm);
}

.tiny {
    font-size: var(--text-xs);
}

/* Text weights */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ==========================================================================
   Special Text Treatments
   ========================================================================== */

/* Apple-style hero text */
.hero-headline {
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    background: linear-gradient(180deg, var(--color-text) 0%, var(--color-text-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Price display */
.price-display {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

/* Label/caption text */
.label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

/* Navigation text */
.nav-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
}

/* Button text */
.btn-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Apple-style link with arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-weight: var(--font-weight-medium);
}

.link-arrow::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* ==========================================================================
   Lists
   ========================================================================== */

/* Content lists (not navigation) */
article ul, 
article ol,
.content ul,
.content ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    list-style: revert;
}

article li,
.content li {
    margin-bottom: 0.5rem;
    list-style: revert;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

blockquote {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-style: italic;
    font-weight: var(--font-weight-light);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    text-align: center;
    padding: var(--space-12) var(--space-4) var(--space-8);
    margin: 0;
    border: none;
}

/* Elegant decorative quote marks */
blockquote::before {
    content: '"';
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5rem;
    font-style: normal;
    line-height: 0.5;
    color: var(--color-primary);
    opacity: 0.25;
    margin-bottom: var(--space-4);
}

blockquote p {
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

blockquote cite {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-top: var(--space-6);
}

/* ==========================================================================
   Code
   ========================================================================== */

code, kbd, pre, samp {
    font-family: var(--font-code);
}

code {
    font-size: 0.875em;
    background-color: var(--color-surface);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

pre {
    overflow-x: auto;
    padding: 1rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
}

pre code {
    background: none;
    padding: 0;
}

/* ==========================================================================
   Responsive Typography Adjustments
   ========================================================================== */

@media (max-width: 639px) {
    html {
        font-size: 15px;
    }
    
    .display-xl {
        font-size: clamp(2rem, 10vw, 3rem);
    }
    
    .display-lg {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 17px;
    }
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text colors */
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-white { color: var(--color-white); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }

/* ==========================================================================
   Print Typography
   ========================================================================== */

@media print {
    html {
        font-size: 12pt;
    }
    
    body {
        font-family: Georgia, 'Times New Roman', serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: Helvetica, Arial, sans-serif;
        page-break-after: avoid;
    }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
}