/*
 * Global per-player typography preferences.
 * This file is intentionally loaded after each page's own stylesheet so the
 * selected typography can soften the original heavy type without changing layouts.
 */

html[data-text-style="current"] {
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-text-style="clean"] {
    --font: "Segoe UI", Aptos, Arial, sans-serif;
}

html[data-text-style="soft"] {
    --font: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

html[data-text-style="classic"] {
    --font: Georgia, "Times New Roman", serif;
}

html[data-text-style="compact"] {
    --font: "Arial Narrow", "Aptos Narrow", Arial, sans-serif;
}

html[data-text-style="mono"] {
    --font: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html[data-text-style="soft"] body {
    letter-spacing: 0.005em;
}

html[data-text-style="compact"] body {
    letter-spacing: -0.01em;
}

html[data-text-style="mono"] body {
    letter-spacing: -0.015em;
}

/* The five alternate presets deliberately soften the original heavy weights. */
html:not([data-text-style="current"]) :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    .primary,
    .secondary,
    .eyebrow,
    label,
    legend,
    strong,
    .brand,
    .theme-link
) {
    font-weight: 700;
}

html[data-text-style="clean"] :where(label, legend, .eyebrow),
html[data-text-style="soft"] :where(label, legend, .eyebrow),
html[data-text-style="classic"] :where(label, legend, .eyebrow),
html[data-text-style="compact"] :where(label, legend, .eyebrow),
html[data-text-style="mono"] :where(label, legend, .eyebrow) {
    font-weight: 600;
}

/*
 * Text-size preference. The root type scale moves in 5% steps so headings,
 * labels and controls stay proportional across desktop and mobile.
 */
html[data-text-size="85"] {
    font-size: 13.6px;
}

html[data-text-size="90"] {
    font-size: 14.4px;
}

html[data-text-size="95"] {
    font-size: 15.2px;
}

html[data-text-size="100"] {
    font-size: 16px;
}

html[data-text-size="105"] {
    font-size: 16.8px;
}

html[data-text-size="110"] {
    font-size: 17.6px;
}

html[data-text-size="115"] {
    font-size: 18.4px;
}

html[data-text-size="120"] {
    font-size: 19.2px;
}

html[data-text-size="125"] {
    font-size: 20px;
}