/* Rate It Plus - Global Typography System (type.css) */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* --- SEMANTIC TAGS --- */
/* Using "body" prefix to beat Tailwind Preflight specificity (tag selector = 0,0,1 vs body tag = 0,0,2) */

body h1,
.h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 700;
    /* font-bold */
    color: var(--color-text-main);
    /* text-content-main */
    letter-spacing: -0.025em;
    /* tracking-tight */
    margin-bottom: 1rem;
    /* mb-4 */
}

@media (min-width: 768px) {

    body h1,
    .h1 {
        font-size: 3.75rem;
        line-height: 1;
    }
}

body h2,
.h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    line-height: 2.4rem;
    font-weight: 700;
    /* font-bold */
    color: white;
    /* text-content-main */
    letter-spacing: -0.025em;
    /* tracking-tight */
    margin-bottom: 0.75rem;
    /* mb-3 */
}

@media (min-width: 768px) {

    body h2,
    .h2 {
        font-size: 3.5rem;
        line-height: 1.05;
    }
}

body h3,
.h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 700;
    /* font-bold */
    color: var(--color-text-main);
    /* text-content-main */
    letter-spacing: 0.025em;
    /* tracking-wide */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

@media (min-width: 768px) {

    body h3,
    .h3 {
        font-size: 1.625rem;
        line-height: 2.1rem;
    }
}

body h4,
.h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
    font-weight: 700;
    /* font-bold */
    color: var(--color-text-main);
    /* text-content-main */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

body h5,
.h5 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

body h6,
.h6 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

body p,
.p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    /* leading-relaxed */
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    /* mb-4 */
}

@media (min-width: 768px) {

    body p,
    .p {
        font-size: 0.9375rem;
    }
}

body small,
.small {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.75rem;
    /* text-xs */
    line-height: 1rem;
    color: var(--color-text-dim);
}

/* --- UTILITY TYPOGRAPHY CLASSES --- */

/* For small, uppercase tracking labels (e.g., above stats or inputs) */
.txt-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 10px;
    /* text-[10px] */
    font-weight: 700;
    /* font-bold */
    line-height: 1;
    margin: 0;
    color: var(--color-text-dim);
    text-transform: uppercase;
    /* uppercase */
    letter-spacing: 0.1em;
    /* tracking-widest */
}

/* For primary large statistics/numbers */
.txt-stat {
    font-family: 'Space Grotesk', sans-serif;
    /* font-display */
    font-size: 1.875rem;
    /* text-3xl */
    line-height: 2.25rem;
    font-weight: 700;
    /* font-bold */
    color: var(--color-text-main);
    /* text-content-main */
}

/* For ultra-small, tertiary information or timestamps */
.txt-micro {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 10px;
    /* text-[10px] */
    line-height: 1.5;
    /* leading-normal */
    color: var(--color-text-dim);
}

@media (min-width: 640px) {
    .txt-micro {
        font-size: 11px;
        /* sm:text-[11px] */
    }
}

/* For tiny badges, tags, or status indicators */
.txt-badge {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 9px;
    /* text-[9px] */
    font-weight: 900;
    /* font-black */
    text-transform: uppercase;
    /* uppercase */
    letter-spacing: 0.05em;
    /* tracking-wider */
}