/* ===== TYPOGRAPHY ===== */

/* Font Faces (TTF only - WOFF files corrupted) */
@font-face {
    font-family: 'Futura';
    src: url('../../fonts/futura/Futura Light font.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('../../fonts/futura/futura medium bt.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('../../fonts/futura/Futura Bold font.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supersonic';
    src: url('../../fonts/supersonic/Supersonic Rocketship.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* Typography Scale */
h1, .h1 {
    font-family: var(--font-accent);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.2;
    color: var(--violet-dark);
    text-shadow: 2px 2px 4px rgba(62, 73, 118, 0.2);
}

h2, .h2 {
    font-family: var(--font-accent);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--violet-dark);
    text-shadow: 2px 2px 4px rgba(62, 73, 118, 0.2);
}

/* Prevent heading flash before Supersonic is ready */
html.fonts-loading h1, html.fonts-loading .h1,
html.fonts-loading h2, html.fonts-loading .h2 {
    opacity: 0;
}

html.fonts-loaded h1, html.fonts-loaded .h1,
html.fonts-loaded h2, html.fonts-loaded .h2 {
    opacity: 1;
    transition: opacity var(--transition-normal, 0.3s ease);
}

h3, .h3 {
    font-size: 1.8rem;
    color: var(--violet-dark);
    font-weight: 700;
}

h4, .h4 {
    font-size: 1.3rem;
    color: var(--violet-dark);
    font-weight: 700;
}

p {
    color: var(--gray-medium);
    line-height: 1.6;
}

.text-large {
    font-size: 1.2rem;
    line-height: 1.7;
}

.text-small {
    font-size: 0.9rem;
}

.text-xs {
    font-size: 0.8rem;
}

.font-weight-light {
    font-weight: 300;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--white);
}

.text-violet {
    color: var(--violet-dark);
}

.text-turquoise {
    color: var(--turquoise-dark);
}