/**
 * Skala tipografi (dari style guide)
 * Base: Body Regular 16px | 24px line height
 * Heading: Antique Olive | Body: Proxima Soft
 */
:root {
    /* Font size */
    --font-size-h1: 68px;
    --font-size-h2: 42px;
    --font-size-h3: 26px;
    --font-size-h4: 16px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-xs: 12px;
    /* Line height */
    --line-height-h1: 72px;
    --line-height-h2: 48px;
    --line-height-h3: 40px;
    --line-height-h4: 24px;
    --line-height-body: 24px;
    --line-height-small: 24px;
    --line-height-xs: 16px;
}

/* Heading 1: 68px / 72px / Medium */
h1, .text-h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);   /* 40px–68px */
    line-height: 1.06;
    font-weight: 500;
}

/* Heading 2: 42px / 48px / Medium */
h2, .text-h2 {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.625rem); /* 28px–42px */
    line-height: 1.14;
    font-weight: 500;
}

/* Heading 3: 26px / 40px / Medium */
h3, .text-h3 {
    font-size: 1.625rem;   /* 26px */
    line-height: 1.54;
    font-weight: 500;
}

/* Heading 4: 16px / 24px / Bold */
h4, .text-h4 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

h5 { font-size: 1rem; line-height: 1.5; font-weight: 600; }
h6 { font-size: 0.875rem; line-height: 1.5; font-weight: 600; }

/* Body: 16px / 24px */
body {
    font-size: var(--font-size-body);
    line-height: 1.5; /* 24/16 */
}

.body-light { font-weight: 300; }
.body-regular { font-weight: 400; }
.body-medium { font-weight: 500; }

/* Small: 14px / 24px / Regular */
.text-small, small {
    font-size: var(--font-size-small);
    line-height: 1.71; /* 24/14 */
    font-weight: 400;
}

/* Extra Small: 12px / 16px / Regular */
.text-xs {
    font-size: var(--font-size-xs);
    line-height: 1.33; /* 16/12 */
    font-weight: 400;
}

/* Caption: 12px / 16px / Medium */
.text-caption {
    font-size: var(--font-size-xs);
    line-height: 1.33;
    font-weight: 500;
}

/* Button: 16px / 24px / Medium */
button, .btn, [role="button"],
input[type="submit"], input[type="button"] {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}
