/* =====================================================================
   Design tokens

   The game pages are the reference: every value below was read back out
   of chrome that was already on screen (.rg-box, .rg-box-header,
   .rg-box-body, .ra-player-toolbar in frontend.css), not invented here.
   They exist so a second surface - the community board - can be built
   from the same numbers instead of a second, nearly-identical palette.

   Before this file the site ran two yellows (#ffff00 on the arcade,
   #ffcc00 on everything added later) and two grey-on-black ramps. Use a
   token for anything new; add one here rather than a fresh literal.

   --------------------------------------------------------------------
   Why this is its own file rather than a block at the top of frontend.css

   LiteSpeed minifies each sheet to wp-content/litespeed/css/<hash>.css,
   and that hash comes from the *source path* - not the content, not the
   enqueue version. The vhost serves it max-age=31536000. So editing
   frontend.css in place reaches a returning visitor whenever their year
   happens to be up, and a version bump changes nothing.

   That is survivable for a tweak. It is not survivable for tokens,
   because the failure is not "sees the old colour" but "sees no colour":
   somebody who has played a game (frontend.css cached for a year) and
   then opens /questions for the first time would fetch the new
   community sheet, find every var(--ra-*) in it undefined, and get an
   unstyled board - no panel backgrounds, no borders, no button fills.

   A new path is fetched by everyone immediately, which is the whole
   point. Registered as 'retro-tokens' and declared a dependency of
   'retro-arcade', so it is always parsed first.

   If these values ever need to change, do NOT edit them here and expect
   the change to ship. Rename the file (tokens-2.css) and update the
   register_style call, the same way play-cover.css was introduced.
   --------------------------------------------------------------------

   Not covered here on purpose: the CRT/cabinet accents around the player
   on a single game page (.ra-tips-bar, .ra-start-game-btn,
   .ra-qa-link-*), which run their own amber-phosphor palette - #0a0a12
   ground, #3a3f52/#14161f bevel, #f0d060 type, VT323. That is a
   deliberate second voice for the machine itself, not drift, and it is
   left alone.
   ===================================================================== */

:root {
    /* Interactive. --ra-accent-ink is the text colour that sits *on* the
       accent; it is black because the accent is a full-brightness yellow. */
    --ra-accent:       #ffff00;
    --ra-accent-ink:   #000000;
    --ra-accent-hover: #ffffff;   /* accent fills invert to white on hover */
    --ra-danger:       #e63946;   /* destructive action */
    --ra-danger-soft:  #ff6b6b;   /* negative score */

    /* Ground and raised surfaces. Panels sit flat on --ra-bg; --ra-surface
       is for insets that should read as recessed (toolbars, vote gutters). */
    --ra-bg:           #000000;
    --ra-surface:      #111111;
    --ra-surface-alt:  #222222;

    /* Three border weights, and they are not interchangeable: --ra-frame is
       the white hairline that draws a panel's outer edge (.rg-box),
       --ra-line is the grey used inside one - header fills, dividers, hover
       fills - and --ra-control-line is the middle grey that outlines an
       input or a chip, where a white frame would be too loud for something
       that small. */
    --ra-frame:        #ffffff;
    --ra-line:         #333333;
    --ra-control-line: #666666;

    /* Three text levels. Anything dimmer than --ra-text-dim on this ground
       starts failing contrast, so the ramp stops here rather than adding a
       fourth step. */
    --ra-text:         #ffffff;
    --ra-text-mute:    #cccccc;
    --ra-text-dim:     #888888;

    /* Corner radii. Panels are square - that is the arcade's whole look - so
       these are only for small controls that already carried a radius. */
    --ra-radius-sm:    3px;
    --ra-radius:       4px;
    --ra-radius-lg:    6px;

    /* Type. --ra-font matches the html/body rule at the top of frontend.css;
       --ra-font-ui is the pixel face, reserved for things you press. Both
       are self-hosted in fonts.css, so neither costs a new request. */
    --ra-font:         Arial, "Helvetica Neue", Helvetica, sans-serif;
    --ra-font-ui:      'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
}