/* ============================================
   EMOtyze Typography System
   ============================================
   A unified, mobile-first typography hierarchy.
   Min readable size on mobile: 16px for body text.
   ============================================ */

/* ---------------------------------------------
   Headings
   --------------------------------------------- */

/* H1: Page Titles */
.typo-h1 {
    font-size: 1.875rem;
    /* 30px mobile */
    line-height: 1.2;
    font-weight: 900;
    /* font-black */
    color: #120E1A;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .typo-h1 {
        font-size: 3rem;
        /* 48px desktop */
    }
}

/* H2: Section Headers */
.typo-h2 {
    font-size: 1.0625rem;
    /* ~17px mobile */
    line-height: 1.3;
    font-weight: 700;
    /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .typo-h2 {
        font-size: 1.0625rem;
        /* ~17px */
    }
}

/* H3: Card Headers / Subsections */
.typo-h3 {
    font-size: 1.125rem;
    /* 18px mobile */
    line-height: 1.4;
    font-weight: 700;
    /* font-bold */
    color: #120E1A;
}

@media (min-width: 768px) {
    .typo-h3 {
        font-size: 1.25rem;
        /* 20px desktop */
    }
}

/* ---------------------------------------------
   Body Text
   --------------------------------------------- */

/* Body: Main Content (never below 16px for accessibility) */
.typo-body {
    font-size: 1rem;
    /* 16px - minimum readable on mobile */
    line-height: 1.6;
    font-weight: 500;
    /* font-medium */
    color: #5B4E6E;
}

/* Small: Secondary Text / Descriptions */
.typo-small {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.5;
    font-weight: 500;
    color: #5B4E6E;
}

/* Caption: Labels, Metadata */
.typo-caption {
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.4;
    font-weight: 700;
    /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5B4E6E;
}

/* Micro: Very small labels (use sparingly) */
.typo-micro {
    font-size: 0.625rem;
    /* 10px */
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ---------------------------------------------
   Links
   --------------------------------------------- */

.typo-link {
    font-weight: 700;
    color: #005782;
    text-decoration: none;
    transition: color 0.2s ease;
}

.typo-link:hover {
    color: #077354;
}

/* ---------------------------------------------
   Color Modifiers
   --------------------------------------------- */

.typo-accent-teal {
    color: #077354;
}

.typo-accent-blue {
    color: #005782;
}

.typo-muted {
    opacity: 0.7;
}

/* ---------------------------------------------
   Mobile Table Adaptations (Insights Pages)
   --------------------------------------------- */

@media (max-width: 767px) {

    /* Keep scrollable but reduce min-width for less scrolling */
    .insight-table-mobile {
        min-width: 520px !important;
    }

    .insight-table-mobile th,
    .insight-table-mobile td {
        padding: 0.5rem 0.375rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Reduce font sizes on mobile */
    .insight-table-mobile th {
        font-size: 0.6rem !important;
        letter-spacing: 0.03em !important;
    }

    .insight-table-mobile td {
        font-size: 0.75rem !important;
    }
}