:root {
    --page-width: 75rem;
    --operator-border: gainsboro;
    --operator-bg-subtle: whitesmoke;
    --operator-accent: royalblue;
    --operator-error: crimson;
    --operator-error-bg: color-mix(in oklab, crimson 10%, white);
    --operator-success: seagreen;
    --operator-success-bg: color-mix(in oklab, seagreen 10%, white);
    --operator-warning: goldenrod;
    --operator-warning-bg: color-mix(in oklab, goldenrod 10%, white);
    --operator-radius: 0.375rem;
    --medal-gold: gold;
    --medal-silver: silver;
    --medal-bronze: peru;
    --operator-gap: 1.5rem;

    --ground: #fdf5e6;
}

* {
    --ink-primary: lch(from var(--ground) clamp(15, calc((49 - l) * infinity), 92) clamp(0, calc(c * 0.6), 8) h);
    --ink-muted: color-mix(in oklab, var(--ink-primary) 65%, var(--ground));

    --rule: color-mix(in oklab, var(--ink-muted) 22%, transparent);
    --tint: color-mix(in oklab, var(--ink-muted) 12%, transparent);

    --font-title: 'Cinzel', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --size-hero: 2.5rem;
    --size-title: 1.5rem;
    --size-body: 1rem;
    --size-small: 0.75rem;

    --weight-body: 400;
    --weight-answer: 600;
    --weight-hero: 700;
}

*, *::before, *::after { box-sizing: border-box }

body {
    margin: 0;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: var(--font-body);
    font-size: var(--size-body);
    background-color: var(--ground);

    &[data-empire] { --ground: var(--player-color) }
    > main { padding: 1rem var(--page-gutter) }
}

:is(main, header, .section-switcher) { --page-gutter: max(1rem, calc((100% - var(--page-width)) / 2)) }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

main > h1 {
    margin-block: 1rem;
    font-family: var(--font-title);
    font-size: var(--size-title);
    font-weight: var(--weight-answer);
    text-transform: uppercase;
}

input, select, textarea, button { font: inherit }
small { font-size: var(--size-small) }

menu {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[role="alert"]:not([class]) {
    border: 1px solid var(--operator-error);
    border-radius: var(--operator-radius);
    margin: 0;
    padding: 0.75em 1em;
    background: var(--operator-error-bg);
    color: var(--operator-error);
}