/* Global Responsive Typography & Spacing */

/* Base Typography */
:root {
    --font-family-primary: 'Inter', 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 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 */
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing Scale (8px grid) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
}

/* Base Typography Styles */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
    color: inherit;
}

h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5 {
    font-size: var(--font-size-base);
}

h6 {
    font-size: var(--font-size-sm);
}

/* Paragraphs and Text */
p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-normal);
}

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

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

.text-large {
    font-size: var(--font-size-lg);
}

/* Responsive Typography */
@media (max-width: 1200px) {
    :root {
        --font-size-3xl: 1.75rem;    /* 28px */
        --font-size-4xl: 2rem;       /* 32px */
    }
    
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

@media (max-width: 992px) {
    :root {
        --font-size-2xl: 1.375rem;   /* 22px */
        --font-size-3xl: 1.625rem;   /* 26px */
        --font-size-4xl: 1.875rem;   /* 30px */
    }
    
    h1, h2, h3 {
        margin-bottom: var(--space-3);
    }
    
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-base: 0.95rem;   /* 15.2px */
        --font-size-lg: 1.0625rem;   /* 17px */
        --font-size-xl: 1.1875rem;   /* 19px */
        --font-size-2xl: 1.3125rem;  /* 21px */
        --font-size-3xl: 1.5rem;     /* 24px */
        --font-size-4xl: 1.75rem;    /* 28px */
    }
    
    body {
        line-height: var(--line-height-relaxed);
    }
    
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: var(--space-3);
    }
    
    p {
        margin-bottom: var(--space-3);
    }
    
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-xs: 0.7rem;      /* 11.2px */
        --font-size-sm: 0.8125rem;   /* 13px */
        --font-size-base: 0.9rem;    /* 14.4px */
        --font-size-lg: 1rem;        /* 16px */
        --font-size-xl: 1.125rem;    /* 18px */
        --font-size-2xl: 1.25rem;    /* 20px */
        --font-size-3xl: 1.375rem;   /* 22px */
        --font-size-4xl: 1.5rem;     /* 24px */
    }
    
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: var(--space-2);
    }
    
    p {
        margin-bottom: var(--space-3);
    }
    
    .container {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-xs: 0.65rem;     /* 10.4px */
        --font-size-sm: 0.75rem;     /* 12px */
        --font-size-base: 0.85rem;   /* 13.6px */
        --font-size-lg: 0.95rem;     /* 15.2px */
        --font-size-xl: 1.05rem;     /* 16.8px */
        --font-size-2xl: 1.15rem;    /* 18.4px */
        --font-size-3xl: 1.25rem;    /* 20px */
        --font-size-4xl: 1.375rem;   /* 22px */
    }
    
    .container {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }
}

/* Component Spacing */
.card {
    margin-bottom: var(--space-6);
}

.card-body {
    padding: var(--space-6);
}

.btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-lg);
}

.form-control {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.form-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

/* Table Typography */
.table {
    font-size: var(--font-size-sm);
}

.table th {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Badge Typography */
.badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
}

/* Alert Typography */
.alert {
    font-size: var(--font-size-sm);
    padding: var(--space-4);
}

/* Navbar Typography */
.navbar-brand {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Responsive Component Adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: var(--space-4);
    }
    
    .btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }
    
    .form-control {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }
    
    .table {
        font-size: var(--font-size-xs);
    }
    
    .alert {
        padding: var(--space-3);
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 576px) {
    .card {
        margin-bottom: var(--space-4);
    }
    
    .card-body {
        padding: var(--space-3);
    }
    
    .btn {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }
    
    .btn-sm {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }
    
    .form-control {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }
    
    .badge {
        font-size: 0.6rem;
        padding: var(--space-1);
    }
}

/* Utility Classes */
.font-mono {
    font-family: var(--font-family-mono);
}

.font-weight-normal {
    font-weight: var(--font-weight-normal);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.line-height-tight {
    line-height: var(--line-height-tight);
}

.line-height-normal {
    line-height: var(--line-height-normal);
}

.line-height-relaxed {
    line-height: var(--line-height-relaxed);
}

/* Spacing Utilities */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Print Styles */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .card {
        page-break-inside: avoid;
    }
}