/*------------------------------------------------------------------
    MODERN TYPOGRAPHY SYSTEM
    Using CSS Variables for easy maintenance and consistency
-------------------------------------------------------------------*/

/* Import Modern Fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Aller:wght@400;700&display=swap');

/* Custom Rockwell Font */
@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/Rockwell.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ==================== FONT FAMILIES ==================== */
    /* Inter: Clean, modern sans-serif for body text - excellent readability */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;

    /* Space Grotesk: Distinctive display font for headings */
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Monospace for code/data */
    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;

    /* Brand-specific fonts */
    --font-brand-title: 'Rockwell', 'Rockwell Nova', 'Georgia', 'Times New Roman', serif;
    --font-brand-subtitle: 'Aller', 'Inter', sans-serif;

    /* ==================== FONT SIZES - FLUID TYPOGRAPHY ==================== */
    /* Using clamp() for responsive sizes that scale with viewport */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);      /* 12-13px */
    --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);   /* 14-15px */
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);     /* 16-17px */
    --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);       /* 17-18px */
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);     /* 18-20px */
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);        /* 20-24px */
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);         /* 24-32px */
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem);    /* 30-40px */
    --text-4xl: clamp(2.25rem, 2rem + 1.25vw, 3rem);           /* 36-48px */
    --text-5xl: clamp(2.5rem, 2.2rem + 1.5vw, 3.5rem);         /* 40-56px */

    /* ==================== FONT WEIGHTS ==================== */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* ==================== LINE HEIGHTS ==================== */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;

    /* ==================== LETTER SPACING ==================== */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ==================== TEXT COLORS (Modern palette) ==================== */
    --text-primary: #0f172a;      /* Rich black */
    --text-secondary: #475569;    /* Slate gray */
    --text-tertiary: #94a3b8;     /* Light slate */
    --text-inverse: #ffffff;      /* White */
    --text-accent: #3b82f6;       /* Modern blue */
}

/* ==================== BASE TYPOGRAPHY ==================== */
body {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==================== HEADINGS ==================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tighter);
}

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

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ==================== PARAGRAPHS & TEXT ELEMENTS ==================== */
p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: 1em;
    color: var(--text-secondary);
}

.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    font-weight: var(--weight-normal);
    color: var(--text-secondary);
}

small, .text-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* ==================== LINKS ==================== */
a {
    color: var(--text-accent);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--text-primary);
    text-decoration: none;
    opacity: 0.8;
}

/* ==================== BUTTONS ==================== */
button, .btn {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-none);
}

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

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

/* ==================== FORMS ==================== */
input, textarea, select {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

::placeholder {
    color: var(--text-tertiary);
    font-weight: var(--weight-normal);
}

/* ==================== TABLES ==================== */
table {
    font-size: var(--text-sm);
}

table thead {
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
}

table tbody {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* ==================== LISTS ==================== */
ul, ol {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

li {
    margin-bottom: 0.5em;
}

/* ==================== CUSTOM COMPONENT OVERRIDES ==================== */
/* Navigation */
.navbar,
.top-navbar {
    font-family: var(--font-primary);
}

.navbar-brand,
.navbar-brand h1 {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
}

.nav-link {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
}

/* Preview/Collection Components - Styled in collections.css */
/* Removed component-specific overrides to prevent conflicts with collections.css */

/* Search */
#homepage-search,
.custom-search input {
    font-size: var(--text-base) !important;
    font-weight: var(--weight-normal);
}

/* Cards & Boxes */
.card-title,
.box-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.card-text,
.box-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* Modal */
.modal-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

.modal-body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* Alerts & Toasts */
.alert,
.toast {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
}

/* Badges */
.badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

/* Breadcrumbs */
.breadcrumb {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* Footer */
.footer,
footer {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* ==================== UTILITY CLASSES ==================== */
/* Font Weight Utilities */
.font-light { font-weight: var(--weight-light); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

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

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

/* Font Family Utilities */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-primary); }
.font-mono { font-family: var(--font-mono); }

/* Text Color Utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-accent { color: var(--text-accent) !important; }

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    /* Slightly reduce sizes on mobile for better fit */
    :root {
        --leading-relaxed: 1.5;
    }

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

@media (min-width: 1920px) {
    /* Larger screens get slightly bigger text */
    :root {
        --text-base: 1.0625rem; /* 17px */
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
}