/* ===================================
   Design System
   Colors & Typography
   =================================== */

/* CSS Custom Properties - Colors */
:root {
    /* Brand Colors */
    --color-primary: #e2422a;
    --color-secondary-cyan: #67d3e4;
    --color-secondary-orange: #ffb033;
    --color-text-dark: rgba(0, 0, 0, 0.8);
    --color-heading-primary: #008E9C;

    /* Semantic Color Aliases */
    --color-text: var(--color-text-dark);
    --color-accent: var(--color-primary);

    /* Typography Scale */
    --font-family: 'Urbanist', sans-serif;
    
    --font-size-h1: 70px;
    --font-size-h2: 35px;
    --font-size-h3: 30px;
    --font-size-h4: 26px;
    --font-size-h5: 22px;
    --font-size-h6: 18px;
    --font-size-body: 16px;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Typography System */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.editor-styles-wrapper .h1,
.editor-styles-wrapper .h2,
.editor-styles-wrapper .h3,
.editor-styles-wrapper .h4,
.editor-styles-wrapper .h5,
.editor-styles-wrapper .h6 {
    font-family: var(--font-family);
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

h1, .h1,
.editor-styles-wrapper .h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading-primary);
}

h1.smaller, .h1.smaller,
.editor-styles-wrapper .h1.smaller {
    font-size: 56px; /* 20% smaller than 70px */
}

h2, .h2,
.editor-styles-wrapper .h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
}

h3, .h3,
.editor-styles-wrapper .h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

h4, .h4,
.editor-styles-wrapper .h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

h5, .h5,
.editor-styles-wrapper .h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
}

h6, .h6,
.editor-styles-wrapper .h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
}

p {
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

/* Responsive Typography */
@media (max-width: 1199px) {
    :root {
        --font-size-h1: 50px;
    }

    h1.smaller, .h1.smaller,
    .editor-styles-wrapper .h1.smaller {
        font-size: 40px; /* 20% smaller than 50px */
    }
}

@media (max-width: 991px) {
    :root {
        --font-size-h1: 56px;
        --font-size-h2: 32px;
        --font-size-h3: 28px;
        --font-size-h4: 24px;
        --font-size-h5: 20px;
        --font-size-h6: 17px;
    }

    h1.smaller, .h1.smaller,
    .editor-styles-wrapper .h1.smaller {
        font-size: 44.8px; /* 20% smaller than 56px */
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-h1: 38px;
        --font-size-h2: 27px;
        --font-size-h3: 24px;
        --font-size-h4: 22px;
        --font-size-h5: 18px;
        --font-size-h6: 16px;
        --font-size-body: 15px;
    }

    h1.smaller, .h1.smaller,
    .editor-styles-wrapper .h1.smaller {
        font-size: 30.4px; /* 20% smaller than 38px */
    }
}