/*
 * FlatUI house themes: the colours, and nothing else.
 *
 * A theme is a set of --game-* custom properties on the element carrying data-game-theme (usually <html>). They
 * inherit, so a wrapper with its own data-game-theme themes just its part of the page.
 *
 * The colours are AArcade Core's six schemes (its ui/theme.js, 2026-10-06): one light and one dark ramp of greys that
 * every family shares, and a hue per family (its accent, the accent's solid fill, the title bar). Lime is FlatUI's own
 * fourth family, made the same way. The theme ids and the six original token names are Aeronauts' (src/game-themes.js),
 * so a game using those names keeps working:
 *   --game-panel   the window and panel background (slightly translucent: the game shows through; dialogs are opaque)
 *   --game-text    body text and icons
 *   --game-muted   secondary text: hints, labels, column headings, inactive tabs
 *   --game-accent  the accent as text and lines: the current tab, the focus ring, an earned title, a sort caret
 *   --game-soft    the fill of controls (buttons, fields, drop-downs, choices) and of quiet wells
 *   --game-line    hairlines and outlines
 * FlatUI adds nine, only because the kit needs them:
 *   --game-accent-fill  the accent as a solid fill (the primary button, a checked switch, a progress bar's fill); in
 *                       a dark theme it is deeper than --game-accent, so text on it stays legible
 *   --game-on-accent    text and icons on --game-accent-fill
 *   --game-titlebar     a window's title bar and its edge, the same in light and dark: it is what tells the themes apart
 *   --game-on-titlebar  the title and the buttons on it
 *   --game-band         the recessed bands: the headline numbers, the section rail, a footer
 *   --game-raised       the raised surface: column headings, a filter band, a hovered row
 *   --game-good / --game-warn / --game-bad   status: success, caution, danger. Fifty Shades has no hue at all, its
 *                       status colours included: there the icon and the words carry the meaning.
 * And one a theme may leave out:
 *   --game-accent-2     a second accent, as text and lines, where a screen tells two parties apart by hue as well as by
 *                       place and words (the player's lines and a character's in a chat log, two teams). Without it,
 *                       the kit uses --game-accent; the house themes leave it out.
 * Every pair used for text is at least 4.5:1 (WCAG AA): text, muted, accent and the status colours on the panel, the
 * on- colours on what they sit on (tests/kit.test.js checks them).
 *
 * YOUR GAME'S OWN THEME: copy one block into your own stylesheet, give it a new id (e.g. [data-game-theme="mygame"]),
 * fill in the values, and call addTheme({ id: 'mygame', name: 'My Game' }) (themes.js) so the settings menu offers
 * it; or paste the block here and add it to THEMES and FAMILIES. The light and dark greys can stay as they are:
 * change the accent, its fill and the title bar, and the theme is yours. A worked one, Shat Bot's, is in the FlatUI
 * repo's examples/themes/.
 */

/* Fifty Shades (Dark) is the default: it applies wherever no theme is set. */
:root,
[data-game-theme="shades-dark"] {
  color-scheme: dark;
  --game-scheme: dark;
  --game-panel: #1e1e1ef2;
  --game-text: #e8e8e8;
  --game-muted: #9d9d9d;
  --game-accent: #c4c4c4;
  --game-soft: #333333;
  --game-line: #3a3a3a;
  --game-accent-fill: #565656;
  --game-on-accent: #ffffff;
  --game-titlebar: #565656;
  --game-on-titlebar: #e8e8e8;
  --game-band: #161616;
  --game-raised: #2b2b2b;
  --game-good: #c4c4c4;
  --game-warn: #b8b8b8;
  --game-bad: #d0d0d0;
}

[data-game-theme="shades"] {
  color-scheme: light;
  --game-scheme: light;
  --game-panel: #fffffff2;
  --game-text: #0d1117;
  --game-muted: #4a5261;
  --game-accent: #5f5f5f;
  --game-soft: #e8ebf0;
  --game-line: #c7ccd6;
  --game-accent-fill: #5f5f5f;
  --game-on-accent: #ffffff;
  --game-titlebar: #6a6a6a;
  --game-on-titlebar: #ffffff;
  --game-band: #ececf0;
  --game-raised: #f2f4f7;
  --game-good: #444444;
  --game-warn: #555555;
  --game-bad: #3a3a3a;
}

[data-game-theme="windows"] {
  color-scheme: light;
  --game-scheme: light;
  --game-panel: #fffffff2;
  --game-text: #0d1117;
  --game-muted: #4a5261;
  --game-accent: #1669d6;
  --game-soft: #e8ebf0;
  --game-line: #c7ccd6;
  --game-accent-fill: #1669d6;
  --game-on-accent: #ffffff;
  --game-titlebar: #1669d6;
  --game-on-titlebar: #ffffff;
  --game-band: #ececf0;
  --game-raised: #f2f4f7;
  --game-good: #2e7d32;
  --game-warn: #a16500;
  --game-bad: #c62828;
}

[data-game-theme="windows-dark"] {
  color-scheme: dark;
  --game-scheme: dark;
  --game-panel: #1e1e1ef2;
  --game-text: #e8e8e8;
  --game-muted: #9d9d9d;
  --game-accent: #3d9bff;
  --game-soft: #333333;
  --game-line: #3a3a3a;
  --game-accent-fill: #1d5aa0;
  --game-on-accent: #ffffff;
  --game-titlebar: #1669d6;
  --game-on-titlebar: #ffffff;
  --game-band: #161616;
  --game-raised: #2b2b2b;
  --game-good: #7cc47c;
  --game-warn: #e8a735;
  --game-bad: #ff7b7b;
}

[data-game-theme="baron"] {
  color-scheme: light;
  --game-scheme: light;
  --game-panel: #fffffff2;
  --game-text: #0d1117;
  --game-muted: #4a5261;
  --game-accent: #c62828;
  --game-soft: #e8ebf0;
  --game-line: #c7ccd6;
  --game-accent-fill: #c62828;
  --game-on-accent: #ffffff;
  --game-titlebar: #c62828;
  --game-on-titlebar: #ffffff;
  --game-band: #ececf0;
  --game-raised: #f2f4f7;
  --game-good: #2e7d32;
  --game-warn: #a16500;
  --game-bad: #c62828;
}

[data-game-theme="baron-dark"] {
  color-scheme: dark;
  --game-scheme: dark;
  --game-panel: #1e1e1ef2;
  --game-text: #e8e8e8;
  --game-muted: #9d9d9d;
  --game-accent: #ff6b6b;
  --game-soft: #333333;
  --game-line: #3a3a3a;
  --game-accent-fill: #a02222;
  --game-on-accent: #ffffff;
  --game-titlebar: #c62828;
  --game-on-titlebar: #ffffff;
  --game-band: #161616;
  --game-raised: #2b2b2b;
  --game-good: #7cc47c;
  --game-warn: #e8a735;
  --game-bad: #ff7b7b;
}

/* Lime: FlatUI's own, a bright yellow-green. Its title bar and fill are light enough that text on them is dark. */
[data-game-theme="lime"] {
  color-scheme: light;
  --game-scheme: light;
  --game-panel: #fffffff2;
  --game-text: #0d1117;
  --game-muted: #4a5261;
  --game-accent: #4a7c0b;
  --game-soft: #e8ebf0;
  --game-line: #c7ccd6;
  --game-accent-fill: #65a30d;
  --game-on-accent: #0d1117;
  --game-titlebar: #84cc16;
  --game-on-titlebar: #0d1117;
  --game-band: #ececf0;
  --game-raised: #f2f4f7;
  --game-good: #2e7d32;
  --game-warn: #a16500;
  --game-bad: #c62828;
}

[data-game-theme="lime-dark"] {
  color-scheme: dark;
  --game-scheme: dark;
  --game-panel: #1e1e1ef2;
  --game-text: #e8e8e8;
  --game-muted: #9d9d9d;
  --game-accent: #a3e635;
  --game-soft: #333333;
  --game-line: #3a3a3a;
  --game-accent-fill: #65a30d;
  --game-on-accent: #0d1117;
  --game-titlebar: #84cc16;
  --game-on-titlebar: #0d1117;
  --game-band: #161616;
  --game-raised: #2b2b2b;
  --game-good: #7cc47c;
  --game-warn: #e8a735;
  --game-bad: #ff7b7b;
}