/* ============================================
   ЕДИНАЯ СИСТЕМА ТИПОГРАФИКИ
   Промышленный подход - все размеры в переменных
   ============================================ */

/* Базовые переменные типографики */
:root {
    /* Размеры шрифтов - модульная шкала 1.25 */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.125rem;    /* 18px */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 1.875rem;   /* 30px */
    --font-size-3xl: 2.25rem;    /* 36px */
    --font-size-4xl: 3rem;       /* 48px */
    --font-size-5xl: 3.75rem;    /* 60px */
    --font-size-6xl: 4.5rem;     /* 72px */
    
    /* Адаптивные размеры с clamp() */
    --font-size-h1: clamp(2.5rem, 5vw, 4.5rem);
    --font-size-h2: clamp(2rem, 4vw, 3.5rem);
    --font-size-h3: clamp(1.5rem, 3vw, 2.25rem);
    --font-size-h4: clamp(1.25rem, 2.5vw, 1.875rem);
    --font-size-h5: clamp(1.125rem, 2vw, 1.5rem);
    --font-size-h6: clamp(1rem, 1.5vw, 1.25rem);
    
    /* Вес шрифта */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Межстрочный интервал */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --line-height-loose: 2;
    
    /* Межбуквенный интервал */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.04em;
    --letter-spacing-widest: 0.08em;
}

/* ============================================
   СБРОС И БАЗОВЫЕ СТИЛИ
   ============================================ */

/* Базовые reset и общие стили */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: var(--color-heading, #1a1a1a);
}

/* Базовая типографика для body */
body {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text, #333333);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ЗАГОЛОВКИ И ТЕКСТ
   Стили определены ниже в mobile-first секции
   ============================================ */

/* Hero Descriptions - единый стиль для всех страниц */
.hero-description,
.course-hero-description,
.club-hero-description {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--font-size-md); /* 18px */
    line-height: var(--line-height-relaxed); /* 1.8 */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--color-text, #333);
}

.hero-description strong,
.course-hero-description strong,
.club-hero-description strong {
    font-weight: var(--font-weight-semibold); /* 600 */
    color: var(--color-primary, #000);
}

.lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* ============================================
   СПИСКИ
   ============================================ */

ul, ol {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* ============================================
   ССЫЛКИ
   ============================================ */

a {
    color: var(--color-primary, #007bff);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dark, #0056b3);
    text-decoration: none;
}

/* ============================================
   УТИЛИТЫ ТИПОГРАФИКИ
   ============================================ */

/* Выравнивание текста */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Трансформация текста */
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

/* Вес шрифта */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Стиль шрифта */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Декорация текста */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Обрезка текста */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Перенос слов */
.break-words {
    word-wrap: break-word;
    word-break: break-word;
}

.break-all {
    word-break: break-all;
}

/* ============================================
   MOBILE-FIRST TYPOGRAPHY
   Using new mobile tokens from shared-variables.css
   ============================================ */

/* Mobile base styles (320px+) - применяются по умолчанию */
h1, .h1 {
    font-size: var(--fs-mobile-4xl);         /* 48px */
    font-weight: var(--fw-mobile-light);     /* 300 */
    line-height: var(--lh-mobile-tight);     /* 1.2 */
    letter-spacing: var(--ls-mobile-tight);  /* -0.02em */
    margin-bottom: var(--space-mobile-text-xl); /* 24px */
}

h2, .h2 {
    font-size: var(--fs-mobile-3xl);         /* 40px */
    font-weight: var(--fw-mobile-light);     /* 300 */
    line-height: var(--lh-mobile-tight);     /* 1.2 */
    letter-spacing: var(--ls-mobile-tight);  /* -0.02em */
    margin-bottom: var(--space-mobile-text-lg); /* 16px */
}

h3, .h3 {
    font-size: var(--fs-mobile-2xl);         /* 32px */
    font-weight: var(--fw-mobile-normal);    /* 400 */
    line-height: var(--lh-mobile-snug);      /* 1.4 */
    margin-bottom: var(--space-mobile-text-md); /* 12px */
}

h4, .h4 {
    font-size: var(--fs-mobile-xl);          /* 24px */
    font-weight: var(--fw-mobile-medium);    /* 500 */
    line-height: var(--lh-mobile-snug);      /* 1.4 */
    margin-bottom: var(--space-mobile-text-md); /* 12px */
}

h5, .h5 {
    font-size: var(--fs-mobile-lg);          /* 20px */
    font-weight: var(--fw-mobile-medium);    /* 500 */
    line-height: var(--lh-mobile-base);      /* 1.5 */
    margin-bottom: var(--space-mobile-text-sm); /* 8px */
}

h6, .h6 {
    font-size: var(--fs-mobile-md);          /* 18px */
    font-weight: var(--fw-mobile-medium);    /* 500 */
    line-height: var(--lh-mobile-base);      /* 1.5 */
    margin-bottom: var(--space-mobile-text-sm); /* 8px */
}

p {
    font-size: var(--fs-mobile-base);        /* 16px */
    line-height: var(--lh-mobile-loose);     /* 1.8 */
    margin-bottom: var(--space-mobile-text-lg); /* 16px */
}

.lead {
    font-size: var(--fs-mobile-md);          /* 18px */
    line-height: var(--lh-mobile-relaxed);   /* 1.65 */
}

.text-small {
    font-size: var(--fs-mobile-sm);          /* 14px */
    line-height: var(--lh-mobile-base);      /* 1.5 */
}

.text-xs {
    font-size: var(--fs-mobile-xs);          /* 12px */
    line-height: var(--lh-mobile-base);      /* 1.5 */
}

/* ============================================
   TABLET AND DESKTOP OVERRIDES
   ============================================ */

/* Tablet (768px+) - scale up headings */
@media (min-width: 768px) {
    h1, .h1 {
        font-size: clamp(3rem, 5vw, 4rem);   /* 48-64px */
        margin-bottom: 2rem;
    }

    h2, .h2 {
        font-size: clamp(2.5rem, 4vw, 3.5rem); /* 40-56px */
        margin-bottom: 1.5rem;
    }

    h3, .h3 {
        font-size: clamp(2rem, 3vw, 3rem);   /* 32-48px */
        margin-bottom: 1.25rem;
    }

    p {
        font-size: 1.0625rem;                /* 17px */
        margin-bottom: 1.25rem;
    }

    .lead {
        font-size: 1.25rem;                  /* 20px */
    }
}

/* Desktop (1024px+) - luxury large typography */
@media (min-width: 1024px) {
    h1, .h1 {
        font-size: clamp(3.5rem, 5vw, 4.5rem); /* 56-72px */
        margin-bottom: 2.5rem;
    }

    h2, .h2 {
        font-size: clamp(3rem, 4vw, 4rem);   /* 48-64px */
        margin-bottom: 2rem;
    }

    h3, .h3 {
        font-size: clamp(2.25rem, 3vw, 3.5rem); /* 36-56px */
        margin-bottom: 1.5rem;
    }
}

/* Large Desktop (1440px+) - maximum luxury scale */
@media (min-width: 1440px) {
    :root {
        --font-size-base: 1.0625rem; /* 17px - увеличиваем базовый размер */
    }

    h1, .h1 {
        font-size: 4.5rem;           /* 72px */
    }

    h2, .h2 {
        font-size: 4rem;             /* 64px */
    }

    h3, .h3 {
        font-size: 3.5rem;           /* 56px */
    }
}