/* ============================================================
   Boogie Games — Color Tokens
   Values transcribed from the Figma app UI (METADATA top colors)
   plus the store-listing asset audit. Single warm-purple family,
   cyan energy accent, gold for coins/rewards. No cool navy as a
   primary; no gradients competing with the purple.
   ============================================================ */
:root {
  /* ---- Purple ramp (brand core) ---- */
  --purple-950: #0D0721;  /* darkest — app background, shadow/depth  rgb(13,7,33)   */
  --purple-900: #1D1241;  /* deep base — card top, panels            rgb(29,18,65)  */
  --purple-850: #251D5D;  /* elevated surface                        rgb(37,20,93)  */
  --purple-800: #291E5E;  /* raised card                             rgb(41,25,94)  */
  --purple-700: #362279;  /* surface / pill base                     rgb(54,34,121) */
  --purple-600: #4B2FA7;  /* mid purple — card gradient bottom       rgb(75,47,167) */
  --purple-550: #4D30B6;  /* button base                             rgb(77,48,182) */
  --purple-500: #5934DD;  /* BRIGHT CTA — primary action             rgb(89,52,221) */
  --purple-450: #6019DA;  /* saturated CTA hover                     rgb(96,25,218) */
  --purple-300: #9F6CFF;  /* light accent purple                     rgb(159,108,255) */
  --purple-200: #A780E7;  /* muted lavender text                     rgb(167,128,231) */

  /* ---- Purple borders / hairlines ---- */
  --purple-line:      #492DA1;  /* card inset border   rgb(73,45,161) */
  --purple-line-dim:  #35116C;  /* deep divider        rgb(53,17,108) */
  --purple-line-soft: #5B41B0;  /* soft border         rgb(91,65,176) */

  /* ---- Cyan energy accent ---- */
  --cyan-500: #06FFFF;  /* electric cyan — active nav, XP fill, hi-score  rgb(6,255,255) */
  --cyan-100: #EBFEFF;  /* near-white cyan tint — body text on cards      rgb(235,254,255) */
  --teal-300: #8ACFD0;  /* muted teal — secondary text / captions         rgb(138,207,208) */

  /* ---- Gold / coins & rewards ---- */
  --gold-400:  #FFF186;  /* coin text / reward highlight   rgb(255,241,134) */
  --gold-500:  #F5C518;  /* coin face                       */
  --gold-700:  #B36300;  /* coin base tone                  */
  --gold-900:  #4A2E00;  /* coin pill shadow / trough       */
  --coin-spec: #FFF6AF;  /* coin specular highlight         */

  /* ---- Gem (magenta-violet capsule outline) ---- */
  --gem-outline: #C287E1; /* gem pill stroke / diamond glyph */

  /* ---- Neutrals ---- */
  --white:      #FFFFFF;
  --ink-900:    #0D0721;
  --black:      #000000;

  /* ---- Semantic status ---- */
  --success: #4ADE80;  /* time-played bar, positive states */
  --warning: #FFB547;
  --danger:  #FF3B3B;  /* notification dot, alerts         */
  --streak:  #FF6A2C;  /* streak flame                     */

  /* ---- Store-listing depth family (secondary, backgrounds only) ---- */
  --store-navy:   #2A1A60;
  --store-accent: #A622F2;

  /* ============================================================
     Semantic aliases — reach for these in components / kits
     ============================================================ */
  --bg-app:        var(--purple-950);
  --bg-page:       var(--purple-900);
  --surface-1:     var(--purple-850);
  --surface-2:     var(--purple-800);
  --surface-3:     var(--purple-700);
  --surface-card:  var(--purple-900);

  --border-card:   var(--purple-line);
  --border-soft:   var(--purple-line-soft);
  --divider:       var(--purple-line-dim);

  --action:        var(--purple-500);
  --action-hover:  var(--purple-450);
  --action-press:  var(--purple-600);

  --accent:        var(--cyan-500);
  --accent-soft:   var(--teal-300);

  --text-strong:   var(--white);
  --text-body:     var(--cyan-100);
  --text-muted:    var(--purple-200);
  --text-caption:  var(--teal-300);
  --text-on-action: var(--white);

  --coin:          var(--gold-400);
  --gem:           var(--gem-outline);

  /* gradients used verbatim in the app */
  --grad-card:   linear-gradient(180deg, var(--purple-900) 0%, var(--purple-600) 100%); /* @kind other */
  --grad-cta:    linear-gradient(180deg, var(--purple-500) 0%, var(--purple-600) 100%); /* @kind other */
  --grad-pill:   linear-gradient(180deg, var(--purple-700) -1%, var(--purple-600) 108%); /* @kind other */
  --grad-coin:   linear-gradient(180deg, #7A4A0F 0%, #3B2408 100%); /* @kind other */
  --grad-xp:     linear-gradient(90deg, #06FFFF 0%, #59C6FF 100%); /* @kind other */
}