/* Font Consistency CSS
   Standardizes typography across the entire Best Deal Forex application */

/* ==========================================
   FONT FAMILY DEFINITIONS
   ========================================== */

/* Import Google Fonts for consistent web typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* CSS Custom Properties for Font Management */
:root {
    /* Primary Font Stack */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
}

/* ==========================================
   GLOBAL FONT RESET AND BASE STYLES
   ========================================== */

* {
    font-family: var(--font-family-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 16px; /* Base font size */
    line-height: var(--line-height-normal);
}

body {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-normal) !important;
    color: #1f2937;
}

/* ==========================================
   HEADING STYLES
   ========================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-tight) !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #111827;
}

h1, .h1 {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-semibold) !important;
}

h3, .h3 {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
}

h4, .h4 {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-medium) !important;
}

h5, .h5 {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
}

h6, .h6 {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* ==========================================
   FORM ELEMENT STYLES
   ========================================== */

input, textarea, select, button {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-normal) !important;
}

/* Form Labels */
label, .label {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: #374151;
    margin-bottom: 0.25rem;
    display: block;
}

/* Compact Labels */
.compact-label {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: #6b7280;
}

/* Input Fields */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="tel"], 
textarea, 
select {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-normal) !important;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: #111827;
}

/* Compact Input Style */
.compact-input {
    font-size: var(--font-size-xs) !important;
    padding: 0.375rem 0.5rem !important;
}

/* Colorful Input Style */
.colorful-input {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */

button, .btn, .button {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-normal) !important;
    letter-spacing: var(--letter-spacing-normal);
    text-transform: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Button Sizes */
.btn-small, .btn-sm {
    font-size: var(--font-size-xs) !important;
    padding: 0.25rem 0.5rem !important;
}

.btn-large, .btn-lg {
    font-size: var(--font-size-base) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Action Buttons */
.action-btn {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: 0.5rem 0.75rem !important;
}

/* ==========================================
   TABLE STYLES
   ========================================== */

table {
    font-family: var(--font-family-primary) !important;
}

th, .table-header {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: #6b7280;
    padding: 0.75rem 1rem;
    text-align: left;
}

td, .table-cell {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: var(--line-height-normal) !important;
    padding: 0.75rem 1rem;
    color: #111827;
}

/* ==========================================
   NAVIGATION STYLES
   ========================================== */

.nav-link, .nav-item a {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-normal) !important;
    text-decoration: none;
}

.nav-link.active {
    font-weight: var(--font-weight-semibold) !important;
}

/* Sidebar Navigation */
.sidebar .nav-link {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
}

.sidebar .nav-link.active {
    font-weight: var(--font-weight-medium) !important;
}

/* ==========================================
   CARD STYLES
   ========================================== */

.card-header h3, .card-header h4 {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin: 0;
}

.card-badge {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

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

/* Font Sizes */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }

/* Font Weights */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Special Text Styles */
.text-mono {
    font-family: var(--font-family-mono) !important;
}

.text-caps {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Help Text and Small Text */
small, .small, .help-text {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-normal) !important;
    color: #6b7280;
    line-height: var(--line-height-normal) !important;
}

/* ==========================================
   STATUS AND BADGE STYLES
   ========================================== */

.status-badge, .badge {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    display: inline-block;
}

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

/* Mobile Devices */
@media (max-width: 640px) {
    html {
        font-size: 14px; /* Slightly smaller base size on mobile */
    }
    
    h1, .h1 { font-size: var(--font-size-2xl) !important; }
    h2, .h2 { font-size: var(--font-size-xl) !important; }
    h3, .h3 { font-size: var(--font-size-lg) !important; }
    
    .compact-input {
        font-size: var(--font-size-sm) !important;
        padding: 0.5rem !important;
    }
    
    .compact-label {
        font-size: var(--font-size-sm) !important;
    }
}

/* Tablet Devices */
@media (min-width: 641px) and (max-width: 1024px) {
    html {
        font-size: 15px; /* Medium base size on tablets */
    }
}

/* Desktop Devices */
@media (min-width: 1025px) {
    html {
        font-size: 16px; /* Standard base size on desktop */
    }
}

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

@media print {
    * {
        font-family: 'Times New Roman', serif !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: bold !important;
        color: #000 !important;
    }
    
    h1 { font-size: 18pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 14pt !important; }
    h4 { font-size: 13pt !important; }
    h5, h6 { font-size: 12pt !important; }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        font-weight: var(--font-weight-medium) !important;
    }
    
    .compact-label {
        font-weight: var(--font-weight-semibold) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus styles for better accessibility */
input:focus, 
textarea:focus, 
select:focus, 
button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==========================================
   COMPONENT-SPECIFIC OVERRIDES
   ========================================== */

/* Header Styles */
.header h1, .logo-text-fallback h1 {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* Footer Styles */
.footer {
    font-size: var(--font-size-sm) !important;
}

/* Modal Styles */
.modal-header h3 {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Form Section Headers */
.form-section h3, .form-section h4 {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    color: #374151;
    margin-bottom: 1rem;
}

/* Summary and Info Text */
.summary-label {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

.summary-value {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-family: var(--font-family-mono) !important;
}

/* Toast/Notification Styles */
.toast-title {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.toast-message {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Ensure consistent font loading */
.font-loading {
    font-display: swap;
}