@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* --- tokens.css -------------------------------------------------------------
 *
 * The palette, in one place, for every page on the site.
 *
 * WHY THIS FILE HOLDS TOKENS AND NOTHING ELSE
 *
 * There is no shared stylesheet here and there deliberately still isn't one.
 * Every page carries its own inline <style> block, and those blocks disagree:
 * 111 selectors -- including `body`, `.close-btn`, `.history-row` and several
 * keyframe stops -- have DIFFERENT bodies on different pages. They have never
 * met, because nothing ever loaded two of them at once. Merging them into a
 * shared rulesheet would introduce every one of those collisions in a single
 * commit, and the result cannot be checked without opening 23 pages in a
 * browser.
 *
 * Custom properties have no such problem. A variable definition cascades but
 * collides with nothing, so this file changes no page's layout, specificity or
 * rule order. It only means a colour is named once instead of 826 times.
 *
 * So: put COLOURS and FACES here -- both are tokens, neither is a rule. Do not
 * put RULES here until the per-page blocks have actually been reconciled --
 * see TODO.md.
 *
 * ONE EXCEPTION, AND WHY IT IS ONE
 *
 * The scrollbar rule at the bottom. The prohibition above exists to stop
 * COLLISIONS -- a rule here landing on a selector some page already styles
 * differently. That reasoning does not reach this one: every page in the site
 * styles its scrollbars through ::-webkit-scrollbar, which Firefox ignores
 * entirely, and not one of them sets scrollbar-width or scrollbar-color. So
 * there is nothing here to collide with, and a page that wants a different
 * scrollbar still gets it -- `*` loses to every real selector.
 *
 * THE TYPE
 *
 * The site asked for 'Segoe UI' and never loaded it, so it was Segoe on
 * Windows, Roboto on Android, DejaVu on Linux and something else again on a
 * Mac -- four different sites. Inter is loaded now, so it is one site, and it
 * has the 800 and 900 weights this chrome leans on rather than faking them.
 *
 * Nineteen places asked for `'Segoe UI', monospace`, which resolves to Segoe
 * and never to a mono at all. What they wanted was figures that do not shuffle
 * while a balance ticks, so they take --font-ui with tabular-nums instead.
 * --font-mono is for the places that genuinely want a mono: hashes, seeds and
 * countdowns.
 *
 * THE PALETTE ITSELF
 *
 * Deep purple, replacing the dark teal the site launched with. Because every
 * page reads its colours from here, this file IS the redesign's colour pass --
 * one edit, whole site.
 *
 * Four roles and nothing decorative:
 *   violet  brand, calls to action, anything interactive
 *   gold    money, and only money -- rakeback, the daily gift, market seeds
 *   mint    a win
 *   rose    a loss, or a destructive action
 *
 * Contrast was measured against WCAG AA rather than eyeballed. --text-dim is
 * 5.20:1 on --surface (it was 3.26:1 before, which failed for the 9-10px
 * uppercase labels it is mostly used on), and --text-on-accent gives 5.03:1 on
 * --accent, where white gave 3.88:1. Keep those ratios if you retune the hues.
 *
 * Game ART is deliberately NOT in here -- the roulette felt, the fruit
 * symbols, the rank-tier metals. Those are identity, not chrome, and they stay
 * hardcoded on their own pages.
 */

:root {
    /* Surfaces, darkest to lightest */
    --surface-sunken:  #0a0613;   /* the page itself */
    --bg:              #140d22;   /* insets, wells, inputs */
    --surface:         #1b1230;   /* panels, cards */
    --surface-raised:  #241839;   /* hover, pressed, chips */

    /* Lines */
    --border:          #2a1d45;   /* the default panel border */
    --border-strong:   #3a2a5a;   /* emphasis, focused inputs */

    /* Faces */
    --font-ui:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type */
    --text:            #d2c8e6;   /* body copy */
    --text-muted:      #a89bc2;   /* secondary copy */
    --text-dim:        #8d7fae;   /* small uppercase labels */
    --text-on-accent:  #12071f;   /* dark type on a violet button */

    /* Accent and states */
    --accent:          #9d5cff;   /* brand: CTAs, links, active nav */
    --accent-bright:   #c79bff;   /* the light end of accent gradients */
    --gold:            #f5c451;   /* money, and only money */
    --win:             #35d99b;   /* a win */
    --danger:          #ff4d6d;   /* a loss, or a destructive action */
    --info:            #6ab8ff;   /* neutral notices */
}

/* Firefox implements none of ::-webkit-scrollbar, so every scrollable thing on
   the site -- tables, feeds, game rows, the audit list -- was painting the
   browser default: a wide light bar down the middle of a dark page. These two
   properties are the whole of Firefox's scrollbar styling. On `*` because the
   containers that scroll differ on every page and are not worth enumerating;
   they affect nothing that does not scroll. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--surface-sunken);
}