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

   ▸ 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: Jalan Kayu Town Council (red/blue/sun-yellow/green,
   "For You, With You" hearts-and-sun theme).
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1 · CORE BRAND ─────────────────────────────────────────────
     The five colours that carry the identity. */
  --skin-primary:       #2447A8;  /* main brand colour — titles, Play buttons, player ring   */
  --skin-primary-deep:  #16306F;  /* pressed-shadow under primary buttons (set ≈30% darker)  */
  --skin-hazard:        #E4222D;  /* danger / wrong answers / PCN path borders               */
  --skin-hazard-deep:   #B01218;  /* pressed-shadow of hazard buttons                        */
  --skin-accent:        #F5B91E;  /* warm highlight — Game 3, gold buttons, cert border      */
  --skin-accent-deep:   #C98F0A;  /* pressed-shadow of accent, lucky-draw booth title        */
  --skin-success:       #56A836;  /* correct / safe / give-way / GO                          */
  --skin-success-deep:  #3D7E24;  /* pressed-shadow of success buttons, ok-tick text        */
  --skin-info:          #9CC3EE;  /* light cyan flourish (water motif)                       */

  /* ── 2 · SURFACES & TEXT ──────────────────────────────────────── */
  --skin-base:          #F6F4EF;  /* page background                                         */
  --skin-surface:       #FFFFFF;  /* cards / booth faces                                     */
  --skin-ink:           #20242E;  /* main text                                               */
  --skin-ink-soft:      #5E6673;  /* secondary text                                          */
  --skin-line:          #E3E0D8;  /* card borders / dividers                                 */
  --skin-muted:         #9AA6B4;  /* faint captions on dark backgrounds                      */

  /* ── 3 · HERO SKY (header + lucky-draw backdrop) ──────────────── */
  --skin-sky:           #16265E;  /* night sky                                               */
  --skin-sky-deep:      #0D1840;  /* sky bottom / skyline silhouettes                        */
  --skin-sky-glow:      #2E4BA8;  /* glow at top of the sky gradient                         */
  --skin-on-sky:        #E9EDF9;  /* body text on the sky                                    */
  --skin-on-sky-soft:   #B9C6E8;  /* faint text on the sky                                   */

  /* ── 4 · GAME WORLD (canvas-drawn scenery) ────────────────────── */
  --skin-grass:         #4B9E33;  /* parkland beside the paths                               */
  --skin-grass-hi:      #A5D68B;  /* safe-island gradient top (Steady Steps)                 */
  --skin-grass-lo:      #7CC25F;  /* safe-island gradient bottom                             */
  --skin-asphalt-hi:    #6E7681;  /* shared-path tarmac gradient top                         */
  --skin-asphalt-lo:    #5A626C;  /* shared-path tarmac gradient bottom                      */
  --skin-kerb-hi:       #C9CFD6;  /* start kerb / pavement gradient top                      */
  --skin-kerb-lo:       #AEB6BF;  /* start kerb gradient bottom                              */
  --skin-park-hi:       #3D8F4E;  /* goal park gradient top                                  */
  --skin-park-lo:       #BFE3AE;  /* goal park gradient bottom                               */
  --skin-safe-ink:      #2E6B27;  /* "SAFE" label on green islands                           */
  --skin-disc:          #FCF3EA;  /* 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:     #C9A94A;  /* headlight ring                                          */
  --skin-hurt:          #FFD2C8;  /* ouch text                                               */
  --skin-hurt-soft:     #FFE2DA;  /* flagged-issue tag background                            */
  --skin-success-soft:  #A5DE8B;  /* success particles / progress bar tip                    */
  --skin-success-pale:  #C8F0B3;  /* keep-left pop text                                      */
  --skin-success-tint:  #E2F5D6;  /* ok-flash tag background                                 */
  --skin-success-line:  #7CC56A;  /* ok-flash tag border                                     */
  --skin-star:          #F7D14E;  /* give-way star chip                                      */
  --skin-paper:         #FDF3D9;  /* lesson box / warm paper                                 */
  --skin-paper-hi:      #FFF8E6;  /* lucky-draw booth gradient top                           */
  --skin-paper-lo:      #FCECC0;  /* 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:     #E4222D;
  --skin-festive-2:     #F5B91E;
  --skin-festive-3:     #2447A8;
  --skin-festive-4:     #F2A0B8;
  --skin-festive-5:     #56A836;
  --skin-festive-6:     #FFF4E6;

  /* ── 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;
}