/* ════════════════════════════════════════════════════════════════
   SKIN.CSS — the ONLY file a designer needs to edit to reskin
   "Heroes of Nee Soon".

   ▸ Every colour and font in the game — including the canvas-drawn
     game worlds, the prize wheel, confetti and the downloadable
     certificate — reads from the tokens below.
   ▸ Open styleguide.html (same folder, or /styleguide.html on the
     live site) to SEE every token in context and preview edits live.
   ▸ Keep values as 6-digit hex (#RRGGBB). Don't rename tokens —
     the code looks them up by name.

   Current skin: Nee Soon Town Council (blue/orange/green/red,
   cool "park-connector" theme).
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1 · CORE BRAND ─────────────────────────────────────────────
     The five colours that carry the identity. */
  --skin-primary:       #1E90C9;  /* main brand colour — titles, Play buttons, player ring   */
  --skin-primary-deep:  #0C5A54;  /* pressed-shadow under primary buttons (set ≈30% darker)  */
  --skin-hazard:        #E8472B;  /* danger / wrong answers / PCN path borders               */
  --skin-hazard-deep:   #BE3219;  /* pressed-shadow of hazard buttons                        */
  --skin-accent:        #F39A2E;  /* warm highlight — Game 3, gold buttons, cert border      */
  --skin-accent-deep:   #D07E15;  /* pressed-shadow of accent, lucky-draw booth title        */
  --skin-success:       #46A93B;  /* correct / safe / give-way / GO                          */
  --skin-success-deep:  #2f7a2a;  /* pressed-shadow of success buttons, ok-tick text        */
  --skin-info:          #4FB3E0;  /* light cyan flourish (water motif)                       */

  /* ── 2 · SURFACES & TEXT ──────────────────────────────────────── */
  --skin-base:          #E9F2F4;  /* page background                                         */
  --skin-surface:       #FBFDFD;  /* cards / booth faces                                     */
  --skin-ink:           #1B2B33;  /* main text                                               */
  --skin-ink-soft:      #5E7480;  /* secondary text                                          */
  --skin-line:          #D3E2E6;  /* card borders / dividers                                 */
  --skin-muted:         #9DB8B1;  /* faint captions on dark backgrounds                      */

  /* ── 3 · HERO SKY (header + lucky-draw backdrop) ──────────────── */
  --skin-sky:           #0E2A3C;  /* night sky                                               */
  --skin-sky-deep:      #081E2C;  /* sky bottom / skyline silhouettes                        */
  --skin-sky-glow:      #1D5560;  /* glow at top of the sky gradient                         */
  --skin-on-sky:        #E9DFC8;  /* body text on the sky                                    */
  --skin-on-sky-soft:   #BBD3CD;  /* faint text on the sky                                   */

  /* ── 4 · GAME WORLD (canvas-drawn scenery) ────────────────────── */
  --skin-grass:         #37953b;  /* parkland beside the paths                               */
  --skin-grass-hi:      #8fce7d;  /* safe-island gradient top (Steady Steps)                 */
  --skin-grass-lo:      #6cbb58;  /* safe-island gradient bottom                             */
  --skin-asphalt-hi:    #6a737a;  /* shared-path tarmac gradient top                         */
  --skin-asphalt-lo:    #586168;  /* shared-path tarmac gradient bottom                      */
  --skin-kerb-hi:       #c2cbd0;  /* start kerb / pavement gradient top                      */
  --skin-kerb-lo:       #a9b4ba;  /* start kerb gradient bottom                              */
  --skin-park-hi:       #2f8f5a;  /* goal park gradient top                                  */
  --skin-park-lo:       #bfe0b2;  /* goal park gradient bottom                               */
  --skin-safe-ink:      #2f6f37;  /* "SAFE" label on green islands                           */
  --skin-disc:          #FBF1EC;  /* warm-white disc under riders (with hazard ring)         */

  /* ── 5 · FEEDBACK TINTS (pops, glows, flashes) ────────────────── */
  --skin-glow:          #FFD27A;  /* gold score pops                                         */
  --skin-glow-soft:     #FFE39A;  /* near-miss "CLOSE!" text                                 */
  --skin-glow-pale:     #FCEAB0;  /* scooter headlight                                       */
  --skin-glow-deep:     #caa94a;  /* headlight ring                                          */
  --skin-hurt:          #FFD2C8;  /* ouch text                                               */
  --skin-hurt-soft:     #ffe2da;  /* flagged-issue tag background                            */
  --skin-success-soft:  #9be08e;  /* success particles / progress bar tip                    */
  --skin-success-pale:  #bff0b3;  /* keep-left pop text                                      */
  --skin-success-tint:  #dff3d6;  /* ok-flash tag background                                 */
  --skin-success-line:  #7cc56a;  /* ok-flash tag border                                     */
  --skin-star:          #F4D35E;  /* give-way star chip                                      */
  --skin-paper:         #FDF1D7;  /* lesson box / warm paper                                 */
  --skin-paper-hi:      #FFF8E6;  /* lucky-draw booth gradient top                           */
  --skin-paper-lo:      #FFEFC4;  /* lucky-draw booth gradient bottom                        */

  /* ── 6 · FESTIVE SET (prize wheel, confetti, string lights) ────
     Six carnival colours used decoratively. Any bright set works. */
  --skin-festive-1:     #E8442F;
  --skin-festive-2:     #F2B33D;
  --skin-festive-3:     #14857C;
  --skin-festive-4:     #E87FA0;
  --skin-festive-5:     #5FA052;
  --skin-festive-6:     #FFF4E0;

  /* ── 7 · HARDWARE NEUTRALS (the inspected e-scooter) ──────────── */
  --skin-metal-1:       #2b3138;  /* wheels / handlebar                                      */
  --skin-metal-2:       #3a4147;  /* deck                                                    */
  --skin-metal-3:       #454d54;  /* stem / fender                                           */
  --skin-metal-4:       #586168;  /* battery box                                             */
  --skin-metal-hub:     #9aa3a9;  /* wheel hubs                                              */
  --skin-tag-line:      #b9c7cd;  /* neutral inspection-tag border                           */
  --skin-chip-line:     #cfe0e5;  /* legend chip border                                      */

  /* ── 8 · TYPE ───────────────────────────────────────────────────
     To change fonts: (a) edit these two lines, (b) swap the Google
     Fonts <link> in index.html to load the new families. */
  --skin-font-display:  'Lilita One', 'Arial Rounded MT Bold', 'Hiragino Maru Gothic ProN', sans-serif;
  --skin-font-body:     'Baloo 2', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}