:root {
    --font-family-base: "Manrope", sans-serif;
    --color-primary-text: #1a1a1a;
    --color-primary: #1b76d4;
    --color-muted-text: #6b6d7a;
    --color-secondary: #4b5563;
    --color-border: #dde6f0;
    --color-card-background: #fffdf9;
    --color-white-text: #ffffff;
    --color-page-background: #f6f8fb;
    --color-icon-background: #dceafb;

    /* Type scale — mobile (<768px) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-h3: 1.125rem; /* 18px */
    --font-size-h2: 1.25rem; /* 20px */
    --font-size-h1: 1.5rem; /* 24px */
    --line-height-base: 1.5;
    --line-height-heading: 1.25;
}

/* Tablet */
@media (min-width: 768px) {
    :root {
        --font-size-h3: 1.25rem; /* 20px */
        --font-size-h2: 1.375rem; /* 22px */
        --font-size-h1: 1.75rem; /* 28px */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --font-size-h3: 1.375rem; /* 22px */
        --font-size-h2: 1.5rem; /* 24px */
        --font-size-h1: 2rem; /* 32px */
    }
}

html {
    font-size: 100%;
}

body {
    background-color: var(--color-page-background) !important;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

h1,
h2,
h3 {
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin: 0;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

small,
.text-sm {
    font-size: var(--font-size-sm);
}

.text-lg {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: 0;
}