/* The six colours are the shapes of the Anorak logo; red is the sniper pages' red in anorak-os. */
:root {
    color-scheme: dark;
    --yellow: #ffed00;
    --pink: #ff919e;
    --grey: #b2b2b2;
    --cyan: #37d0f2;
    --green: #9df44b;
    --orange: #ffad00;
    --red: #ff5252;
    --black: #000;
    --bg: #11100e;
    --bg-2: #181715;
    --card: #1d1c19;
    --card-2: #262420;
    --line: #2f2d28;
    --line-2: #45423b;
    --text: #f4f1ea;
    --text-2: #b9b4a8;
    --dim: #918b7f;
    --ink: #14130f;
    --accent: var(--yellow);
    --ok: var(--green);
    --bad: var(--red);
    --info: var(--cyan);
    --radius: 12px;
    --radius-sm: 8px;
    --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
[data-template='sniper'] {
    --tpl: var(--orange);
    --accent: var(--orange);
}
[data-template='branching'] {
    --tpl: var(--pink);
    --accent: var(--pink);
}
[data-template='adventure'] {
    --tpl: var(--cyan);
    --accent: var(--cyan);
}
[data-template='story-shooter'] {
    --tpl: var(--green);
    --accent: var(--green);
}
:root,
[data-template] {
    --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
}
body {
    background:
        radial-gradient(
            1100px 640px at 92% -160px,
            color-mix(in srgb, var(--orange) 8%, transparent),
            transparent
        ),
        radial-gradient(
            900px 560px at -6% -120px,
            color-mix(in srgb, var(--pink) 6%, transparent),
            transparent
        ),
        var(--bg);
    background-repeat: no-repeat;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}