/**
 * My Rental Calendar - Typography System
 * 
 * Centralized typography system that inherits from Vantage theme
 * while providing consistent scaling and hierarchy throughout the plugin.
 * 
 * This file is dynamically enhanced via PHP (class-branding.php) to inject
 * the actual Vantage theme fonts and user-selected font scale.
 * 
 * @version 1.0.0
 * @author  My Rental Calendar
 */

/* =============================================================================
   BASE TYPOGRAPHY VARIABLES
   ============================================================================= */

:root {
    /* Font Families - Injected dynamically via PHP from Vantage Customizer
     * Fallback to system fonts if Vantage fonts fail to load
     * Default: Helvetica Neue (Vantage default) */
    --mrc-font-family-base: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --mrc-font-family-heading: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    
    /* Font Scale - User adjustable via Branding settings
     * Default: 1 (100%)
     * Options: 0.875 (87.5%), 1 (100%), 1.125 (112.5%), 1.25 (125%) */
    --mrc-font-scale: 1;
    
    /* Type Scale - Major Third (1.25) ratio
     * All sizes scale proportionally with --mrc-font-scale */
    --mrc-text-xs: calc(0.75rem * var(--mrc-font-scale));      /* 12px */
    --mrc-text-sm: calc(0.875rem * var(--mrc-font-scale));     /* 14px */
    --mrc-text-base: calc(1rem * var(--mrc-font-scale));       /* 16px */
    --mrc-text-lg: calc(1.25rem * var(--mrc-font-scale));      /* 20px */
    --mrc-text-xl: calc(1.5rem * var(--mrc-font-scale));       /* 24px */
    --mrc-text-2xl: calc(1.875rem * var(--mrc-font-scale));    /* 30px */
    --mrc-text-3xl: calc(2.25rem * var(--mrc-font-scale));     /* 36px */
    --mrc-text-4xl: calc(3rem * var(--mrc-font-scale));        /* 48px */
    
    /* Line Heights - For optimal readability */
    --mrc-leading-none: 1;
    --mrc-leading-tight: 1.25;      /* Headings, compact text */
    --mrc-leading-snug: 1.375;      /* Subheadings */
    --mrc-leading-normal: 1.5;      /* Body text, paragraphs */
    --mrc-leading-relaxed: 1.625;   /* Small text for readability */
    --mrc-leading-loose: 2;         /* Extra spacing when needed */
    
    /* Letter Spacing - For fine-tuning */
    --mrc-tracking-tighter: -0.05em;
    --mrc-tracking-tight: -0.025em;
    --mrc-tracking-normal: 0;
    --mrc-tracking-wide: 0.025em;
    --mrc-tracking-wider: 0.05em;
    --mrc-tracking-widest: 0.1em;
    
    /* Font Weights - Semantic naming */
    --mrc-font-normal: 400;
    --mrc-font-medium: 500;
    --mrc-font-semibold: 600;
    --mrc-font-bold: 700;
}

/* =============================================================================
   PLUGIN-WIDE BASE STYLES
   ============================================================================= */

/* Apply base typography to all plugin components */
.mrc-calendar,
.mrc-modal,
.mrc-booking-form,
.mrc-customer-dashboard,
.mrc-payment-page,
.mrc-payment-success-page,
.mrc-payment-cancelled-page {
    font-family: var(--mrc-font-family-base);
    font-size: var(--mrc-text-base);
    line-height: var(--mrc-leading-normal);
    letter-spacing: var(--mrc-tracking-normal);
}

/* Headings use heading font family */
.mrc-calendar h1, .mrc-calendar h2, .mrc-calendar h3, .mrc-calendar h4, .mrc-calendar h5, .mrc-calendar h6,
.mrc-modal h1, .mrc-modal h2, .mrc-modal h3, .mrc-modal h4, .mrc-modal h5, .mrc-modal h6,
.mrc-booking-form h1, .mrc-booking-form h2, .mrc-booking-form h3,
.mrc-customer-dashboard h1, .mrc-customer-dashboard h2, .mrc-customer-dashboard h3,
.mrc-payment-page h1, .mrc-payment-page h2, .mrc-payment-page h3 {
    font-family: var(--mrc-font-family-heading);
    line-height: var(--mrc-leading-tight);
    font-weight: var(--mrc-font-semibold);
}

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

/* Font Size Utilities */
/* DEPRECATED: .mrc-text-xs - Use .mrc-text-sm instead (minimum 14px) */
.mrc-text-xs { font-size: var(--mrc-text-sm); } /* Fallback to sm for backwards compat */
.mrc-text-sm { font-size: var(--mrc-text-sm); }
.mrc-text-base { font-size: var(--mrc-text-base); }
.mrc-text-lg { font-size: var(--mrc-text-lg); }
.mrc-text-xl { font-size: var(--mrc-text-xl); }
.mrc-text-2xl { font-size: var(--mrc-text-2xl); }
.mrc-text-3xl { font-size: var(--mrc-text-3xl); }
.mrc-text-4xl { font-size: var(--mrc-text-4xl); }

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

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

/* Letter Spacing Utilities */
.mrc-tracking-tight { letter-spacing: var(--mrc-tracking-tight); }
.mrc-tracking-normal { letter-spacing: var(--mrc-tracking-normal); }
.mrc-tracking-wide { letter-spacing: var(--mrc-tracking-wide); }

/* =============================================================================
   COMPONENT-SPECIFIC TYPOGRAPHY
   ============================================================================= */

/* Calendar Day Numbers */
.fc-daygrid-day-number {
    font-size: var(--mrc-text-lg);
    font-weight: var(--mrc-font-semibold);
    line-height: var(--mrc-leading-tight);
}

/* Calendar Prices */
.mrc-day-price {
    font-size: var(--mrc-text-sm);
    font-weight: var(--mrc-font-semibold);
    line-height: var(--mrc-leading-normal);
}

/* Modal Titles */
.mrc-modal h3 {
    font-size: var(--mrc-text-xl);
    line-height: var(--mrc-leading-tight);
    font-weight: var(--mrc-font-semibold);
}

.mrc-modal h4 {
    font-size: var(--mrc-text-base);
    line-height: var(--mrc-leading-snug);
    font-weight: var(--mrc-font-semibold);
}

/* Form Labels */
.mrc-booking-form label,
.mrc-customer-dashboard label {
    font-size: var(--mrc-text-sm);
    font-weight: var(--mrc-font-medium);
    line-height: var(--mrc-leading-normal);
}

/* Form Inputs */
.mrc-booking-form input,
.mrc-booking-form textarea,
.mrc-booking-form select {
    font-size: var(--mrc-text-base);
    font-family: var(--mrc-font-family-base);
    line-height: var(--mrc-leading-normal);
}

/* Small Text / Hints */
.mrc-booking-form small,
.mrc-customer-dashboard small,
small.description {
    font-size: var(--mrc-text-sm);
    line-height: var(--mrc-leading-relaxed);
}

/* Buttons */
.mrc-btn,
button.mrc-btn {
    font-size: var(--mrc-text-sm);
    font-weight: var(--mrc-font-medium);
    font-family: var(--mrc-font-family-base);
    line-height: var(--mrc-leading-none);
}

/* Payment Page Titles */
.mrc-payment-success-page h1,
.mrc-payment-cancelled-page h1 {
    font-size: var(--mrc-text-3xl);
    line-height: var(--mrc-leading-tight);
    font-weight: var(--mrc-font-bold);
}

/* Dashboard Section Headers */
.mrc-customer-dashboard h2 {
    font-size: var(--mrc-text-2xl);
    line-height: var(--mrc-leading-tight);
    font-weight: var(--mrc-font-semibold);
}

.mrc-customer-dashboard h3 {
    font-size: var(--mrc-text-xl);
    line-height: var(--mrc-leading-snug);
    font-weight: var(--mrc-font-semibold);
}

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

/* Reduce font sizes on mobile for better readability */
@media (max-width: 768px) {
    :root {
        /* Slightly smaller base on mobile */
        --mrc-text-base: calc(0.9375rem * var(--mrc-font-scale)); /* 15px */
        --mrc-text-3xl: calc(2rem * var(--mrc-font-scale));       /* 32px instead of 36px */
        --mrc-text-4xl: calc(2.5rem * var(--mrc-font-scale));     /* 40px instead of 48px */
    }
}

@media (max-width: 480px) {
    :root {
        /* Even smaller on very small screens */
        --mrc-text-base: calc(0.875rem * var(--mrc-font-scale)); /* 14px */
        --mrc-text-2xl: calc(1.5rem * var(--mrc-font-scale));    /* 24px instead of 30px */
    }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Ensure text remains readable at all scale levels */
@media (min-width: 1200px) {
    /* Allow larger text on big screens if user selected large scale */
    .mrc-calendar,
    .mrc-modal,
    .mrc-booking-form {
        max-width: none; /* Don't constrain width when text is larger */
    }
}

/* Respect user's system font size preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mrc-calendar,
    .mrc-modal,
    .mrc-booking-form {
        font-weight: var(--mrc-font-medium); /* Slightly bolder for better contrast */
    }
}