/* ==========================================================================
   MODERN TYPOGRAPHY SYSTEM
   ========================================================================== */

/*
   CSS Variables for easy site-wide font management
   To change fonts site-wide, simply update these values
*/
:root {
    /* Primary Font Stack - Warm, readable sans-serif for body text and lists */
    /* Using Source Sans Pro - designed by Paul Hunt for Adobe, excellent readability */
    --font-primary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Heading Font Stack - Bold, modern geometric sans-serif */
    /* Using Montserrat - inspired by urban typography, perfect for professional/industrial sites */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Typographic Scale - Consistent font sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 30px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;

    /* 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;
}

/* Base Typography */
html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: #353535;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0;
    padding: 0;
}

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

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-md);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Paragraphs */
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin: 0 0 1em 0;
}

/* Links */
a {
    font-family: var(--font-primary);
    text-decoration: none;
    color: inherit;
}

a:hover, a:focus {
    outline: none;
}

/* Buttons */
button, .btn {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Lists */
ul, ol {
    font-family: var(--font-primary);
}

li {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Small Text */
small, .small {
    font-size: var(--font-size-sm);
}

/* Text Utilities */
.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-md { font-size: var(--font-size-md) !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; }
.text-3xl { font-size: var(--font-size-3xl) !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; }