:root {
    /* Default css variable values */

    /* Text size (large) */
    --book-text-size: 32px;

    /* Color theme (light mode) */
    --color-bg: #f0f0f0;
    --color-content-bg: #ffffff;
    --color-text: #333333;
    --color-text-dim: #33333394;
    --color-text-dimmer: #33333348;
    --color-shadow: rgba(0,0,0, 0.1);
    --color-button-bg: #888888;

    /* Highlight colors (orange) */
    --color-segment-highlight: #ffaa4488;
    --color-segment-hover: color-mix(in srgb, var(--color-segment-highlight) 60%, transparent);
    --color-segment-group-current: color-mix(in srgb, var(--color-segment-highlight) 25%, transparent);
    --color-segment-group-hover: color-mix(in srgb, var(--color-segment-highlight) 25%, transparent);
    /* Dim bases carry their own alpha, so mix percentages are boosted to
       compensate: effective alphas land around 28% / 14% in light mode. */
    --color-segment-noaudio-hover: color-mix(in srgb, var(--color-text-dimmer) 45%, transparent);
    --color-segment-group-noaudio-hover: color-mix(in srgb, var(--color-text-dimmer) 25%, transparent);
}
:root {
    @media (max-width: 600px) {
        --book-text-size: 24px;
    }
}

[data-book-text-size="medium"] {
    --book-text-size: 24px;
}
[data-book-text-size="medium"] {
    @media (max-width: 600px) {
        --book-text-size: 18px;
    }
}

[data-book-text-size="small"] {
    --book-text-size: 18px;
}
[data-book-text-size="small"] {
    @media (max-width: 600px) {
        --book-text-size: 14px;
    }
}


[data-theme="dark"] {
    --color-bg: #2c2c2c;
    --color-content-bg: #222222;
    --color-text: #d8d8d8;
    --color-text-dim: #d8d8d888;
    --color-text-dimmer: #d8d8d844;
    --color-shadow: rgba(0, 0, 0, 0.33);

    --color-segment-highlight: #ffaa4466;
}

[data-segment-colors="blue"] {
    --color-segment-highlight: #4444ff55;
}
[data-segment-colors="blue"][data-theme="dark"] {
    --color-segment-highlight: #8888ff80;
}

[data-segment-colors="red"] {
    --color-segment-highlight: #ffbbff;
}
[data-segment-colors="red"][data-theme="dark"] {
    --color-segment-highlight: #603060ff;
}