/* ===============================================
   MANGO BLOSSOM - TYPOGRAPHY & UTILITIES
   Professional font system with responsive scaling
   =============================================== */

:root {
    /* ===== FONT FAMILY ===== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Georgia', 'Times New Roman', serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* ===== FONT SIZES (Responsive) ===== */
    --text-xs: 0.75rem;       /* 12px */
    --text-sm: 0.875rem;      /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.25rem;       /* 20px */
    --text-2xl: 1.5rem;       /* 24px */
    --text-3xl: 1.875rem;     /* 30px */
    --text-4xl: 2.25rem;      /* 36px */
    --text-5xl: 3rem;         /* 48px */
    --text-6xl: 3.75rem;      /* 60px */

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

    /* ===== LINE HEIGHTS ===== */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* ===== LETTER SPACING ===== */
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
}

/* ===== HEADING STYLES ===== */
h1, .h1 {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1rem;
}

h2, .h2 {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1rem;
}

h3, .h3 {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0.75rem;
}

h4, .h4 {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.5rem;
}

h5, .h5 {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.5rem;
}

/* ===== BODY TEXT ===== */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
}

p {
    margin-bottom: 1rem;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

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

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

em, .italic {
    font-style: italic;
}

/* ===== LINKS ===== */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== CODE & PREFORMATTED ===== */
code, kbd, samp {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-x: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    line-height: var(--leading-normal);
}

pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* ===== LISTS ===== */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

ul li::marker {
    color: var(--primary-color);
}

ol li::marker {
    color: var(--primary-color);
    font-weight: var(--weight-semibold);
}

dt {
    font-weight: var(--weight-semibold);
    margin-top: 1rem;
}

dd {
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
}

/* ===== BLOCKQUOTES ===== */
blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--muted-text);
}

/* ===== HORIZONTAL RULES ===== */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

/* ===== UTILITY TEXT CLASSES ===== */
.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); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

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

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

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.italic { font-style: italic; }
.not-italic { font-style: normal; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== RESPONSIVE TYPOGRAPHY (Tablets) ===== */
@media (max-width: 768px) {
    h1, .h1 { font-size: var(--text-3xl); }
    h2, .h2 { font-size: var(--text-2xl); }
    h3, .h3 { font-size: var(--text-xl); }
    
    body { font-size: var(--text-sm); }
    p { font-size: var(--text-sm); }
}

/* ===== RESPONSIVE TYPOGRAPHY (Mobile) ===== */
@media (max-width: 480px) {
    h1, .h1 { font-size: var(--text-2xl); }
    h2, .h2 { font-size: var(--text-xl); }
    h3, .h3 { font-size: var(--text-lg); }
    
    body { font-size: var(--text-xs); }
    p { font-size: var(--text-xs); }
}

/* ===== PRINT STYLES ===== */
@media print {
    body { font-size: 12pt; }
    h1, .h1 { font-size: 24pt; page-break-after: avoid; }
    h2, .h2 { font-size: 20pt; page-break-after: avoid; }
    h3, .h3 { font-size: 16pt; page-break-after: avoid; }
    p { margin-bottom: 0.5rem; orphans: 3; widows: 3; }
    a { text-decoration: underline; }
}