:root {
    color-scheme: light;
    --hiq-font-sans: Arial, "Noto Sans Hebrew", sans-serif;
    --hiq-font-mono: "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --hiq-type-caption-size: 12px;
    --hiq-type-meta-size: 13px;
    --hiq-type-label-size: 14px;
    --hiq-type-helper-size: 15px;
    --hiq-type-body-size: 16px;
    --hiq-type-control-size: 17px;
    --hiq-type-section-size: 18px;
    --hiq-type-subtitle-size: 20px;
    --hiq-type-compact-title-size: 24px;
    --hiq-type-page-title-size: clamp(27px, 3vw, 32px);
    --hiq-type-metric-size: clamp(30px, 4vw, 36px);
    --hiq-type-timer-size: clamp(36px, 8vw, 52px);
    --hiq-type-hero-size: clamp(44px, 10vw, 68px);

    --hiq-type-weight-regular: 400;
    --hiq-type-weight-medium: 600;
    --hiq-type-weight-strong: 700;

    --hiq-type-line-compact: 1.15;
    --hiq-type-line-normal: 1.4;
    --hiq-type-line-relaxed: 1.55;

    --hiq-screen-page-title-size: var(--hiq-type-page-title-size);
    --hiq-screen-section-title-size: var(--hiq-type-section-size);
    --hiq-screen-body-size: var(--hiq-type-body-size);
    --hiq-screen-helper-size: var(--hiq-type-helper-size);
    --hiq-screen-label-size: var(--hiq-type-label-size);
    --hiq-screen-stat-label-size: var(--hiq-type-meta-size);
    --hiq-screen-stat-value-size: var(--hiq-type-section-size);
    --hiq-screen-metric-value-size: var(--hiq-type-metric-size);
    --hiq-screen-weight-regular: var(--hiq-type-weight-regular);
    --hiq-screen-weight-medium: var(--hiq-type-weight-medium);
    --hiq-screen-weight-strong: var(--hiq-type-weight-strong);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--hiq-font-sans);
}

body {
    font-size: var(--hiq-type-body-size);
    font-weight: var(--hiq-type-weight-regular);
    line-height: var(--hiq-type-line-normal);
}

strong,
b {
    font-weight: var(--hiq-type-weight-strong);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--hiq-type-weight-strong);
}

small {
    font-size: var(--hiq-type-caption-size);
}

code,
kbd,
pre,
samp {
    font-family: var(--hiq-font-mono);
}

button,
input,
select,
textarea {
    font-size: inherit;
    font-weight: inherit;
}
