/**
 * Stepes Typography System
 * Reference implementation — class names may differ in production,
 * but font usage, tracking, role mapping, and brand color must stay consistent.
 *
 * Spec: docs/stepes-typography-spec.md
 * Font: https://fonts.google.com/specimen/Google+Sans+Flex
 */

:root {
    /* Brand colors */
    --stepes-primary: #C11D63;
    --stepes-primary-hover: #A71954;
    --stepes-primary-dark: #9F1D55;
    --stepes-primary-deep: #7A1542;
    --stepes-primary-soft: #FDF2F7;
    --stepes-magenta-icon: #B11C5C;
    --stepes-neutral-bg: #F6F6F7;
    --stepes-neutral-icon-bg: #F3F4F6;
    --stepes-border: #E5E7EB;

    /* Font */
    --font-stepes: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Heading sizes (theme layer) */
    --font-size-h1: 56px;
    --font-size-h2: 36px;
    --font-size-h3: 22px;
}

/* Base element styles */

p {
    margin-bottom: 0;
}

a {
    color: var(--stepes-primary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--stepes-primary-deep);
}

/* Hero H1 */

.type-h1 {
    font-family: var(--font-stepes);
    font-weight: 650 !important;
    font-stretch: 102%;
    font-size: 56px;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

/* Section H2 */

.type-h2 {
    font-family: var(--font-stepes);
    font-weight: 620 !important;;
    font-stretch: 101%;
    font-size: 36px;
    line-height: 1.10;
    letter-spacing: -0.022em;
}

/* Card / subsection H3 */

.type-h3 {
    font-family: var(--font-stepes);
    font-weight: 600 !important;;
    font-stretch: 100%;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.012em;
}

/* Body copy */

.type-body-lg {
    font-family: var(--font-stepes);
    font-weight: 450 !important;;
    font-stretch: 100%;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: -0.005em;
}

.type-body {
    font-family: var(--font-stepes);
    font-weight: 430 !important;;
    font-stretch: 100%;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
}

.type-body-sm {
    font-family: var(--font-stepes);
    font-weight: 450 !important;;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
}

/* UI labels / eyebrow / buttons */

.type-eyebrow,
.type-button,
.type-ui-label {
    font-family: var(--font-stepes);
    font-weight: 560 !important;;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.type-eyebrow {
    color: var(--stepes-primary);
}

/* Responsive */

@media (max-width: 1024px) {
    .type-h1 {
        font-size: 48px;
        line-height: 1.05;
        letter-spacing: -0.028em;
    }

    .type-h2 {
        font-size: 32px;
        line-height: 1.12;
    }
}

@media (max-width: 640px) {
    .type-h1 {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -0.02em;
        font-stretch: 100%;
    }

    .type-h2 {
        font-size: 28px;
        line-height: 1.14;
        letter-spacing: -0.015em;
        font-stretch: 100%;
    }
}