/* ============================================================
   24好玩 · Color tokens  (Element Plus base + 24好玩 brand layer)
   ------------------------------------------------------------
   The product is built on Element Plus. We keep Element's full
   token system and OVERRIDE the primary color with the 24好玩
   brand orange (#FF6A2B). Element's default blue is preserved as
   --el-color-blue for reference. Marketing/brand accents live in
   the "Brand" block below.
   ============================================================ */
:root {
  /* ============================================================
     ELEMENT PLUS — semantic brand colors
     primary overridden to 24好玩 orange; light/dark ramps follow
     Element's white/black mix formula.
     ============================================================ */
  --el-color-primary:          #20B898; /* 24好玩 brand teal (logo) */
  --el-color-primary-light-3:  #63CDB7;
  --el-color-primary-light-5:  #90DCCC;
  --el-color-primary-light-7:  #BCEAE0;
  --el-color-primary-light-8:  #D2F1EA;
  --el-color-primary-light-9:  #E9F8F5;
  --el-color-primary-dark-2:   #1A9378;

  /* Element's stock blue, kept for reference / info accents */
  --el-color-blue:             #409EFF;

  --el-color-success:          #67C23A;
  --el-color-success-light-9:  #F0F9EB;
  --el-color-warning:          #E6A23C;
  --el-color-warning-light-9:  #FDF6EC;
  --el-color-danger:           #F56C6C;
  --el-color-danger-light-9:   #FEF0F0;
  --el-color-error:            #F56C6C;
  --el-color-info:             #909399;
  --el-color-info-light-9:     #F4F4F5;

  /* ---- Element text ramp ---- */
  --el-text-color-primary:     #303133;
  --el-text-color-regular:     #606266;
  --el-text-color-secondary:   #909399;
  --el-text-color-placeholder: #A8ABB2;
  --el-text-color-disabled:    #C0C4CC;

  /* ---- Element border ramp ---- */
  --el-border-color:            #DCDFE6;
  --el-border-color-light:      #E4E7ED;
  --el-border-color-lighter:    #EBEEF5;
  --el-border-color-extra-light:#F2F6FC;
  --el-border-color-dark:       #D4D7DE;
  --el-border-color-darker:     #CDD0D6;

  /* ---- Element fill ramp ---- */
  --el-fill-color:         #F0F2F5;
  --el-fill-color-light:   #F5F7FA;
  --el-fill-color-lighter: #FAFAFA;
  --el-fill-color-extra-light: #FAFCFF;
  --el-fill-color-blank:   #FFFFFF;

  /* ---- Element background ---- */
  --el-bg-color:          #FFFFFF;
  --el-bg-color-page:     #F2F3F5;
  --el-bg-color-overlay:  #FFFFFF;

  /* ============================================================
     24好玩 BRAND LAYER — logo, marketing surfaces, game thumbnails,
     mascot states. Built from the real logo + product screenshots.
     ============================================================ */
  /* Brand teal ramp (== primary; the pixel-dino mark) */
  --teal-50:  #E9F8F5;  --teal-100: #C9F0E6; --teal-200: #A0E5D3;
  --teal-300: #63CDB7;  --teal-400: #3DC4A8; --teal-500: #20B898;
  --teal-600: #1A9378;  --teal-700: #14735E; --teal-800: #0E5444;

  /* Brand accents pulled from the logo + UI */
  --brand-pink:   #F088A8; /* dino tail */
  --brand-pink-soft: #FCE0EA;
  --brand-yellow: #FCD890; /* dino eye / soft tag fills */
  --brand-gold:   #F5B70E; /* 发布 button, solid category tags */
  --brand-price:  #FF5000; /* price red-orange (¥0) */

  /* Playful accents for category icons / marketing */
  --yellow-50:#FFF9E6; --yellow-100:#FFEFBC; --yellow-400:#FCD890; --yellow-500:#F5B70E; --yellow-600:#D9930A;
  --purple-50:#F2EEFF; --purple-100:#E0D7FF; --purple-400:#9B7BFF; --purple-500:#7C5CFF; --purple-600:#6442E0;
  --pink-50:#FFEFF3; --pink-100:#FFD6E0; --pink-400:#FF7591; --pink-500:#F088A8; --pink-600:#E2638A;
  --blue-50:#EAF5FF; --blue-100:#CCE7FF; --blue-400:#5FB2FF; --blue-500:#409EFF; --blue-600:#1B7AD6;
  /* green aliases → brand teal (primary is the green) */
  --green-50:var(--teal-50); --green-100:var(--teal-100); --green-400:var(--teal-400); --green-500:var(--teal-500); --green-600:var(--teal-600);

  /* ============================================================
     CONSOLE CHROME — dark slate top bar + sidebar (real product)
     ============================================================ */
  --chrome-topbar:    #1C2630;
  --chrome-sidebar:   #2C333E;
  --chrome-hover:     #3A4150;
  --chrome-active:    var(--el-color-primary);
  --chrome-text:      #E7EAEE;
  --chrome-text-muted:#9AA3AE;
  --chrome-border:    #353C47;

  /* ============================================================
     SEMANTIC ALIASES — what components reference.
     Mapped onto Element tokens so the system stays Element-native.
     ============================================================ */
  --brand:          var(--el-color-primary);
  --brand-hover:    var(--el-color-primary-light-3);
  --brand-active:   var(--el-color-primary-dark-2);
  --brand-soft:     var(--el-color-primary-light-9);
  --brand-soft-2:   var(--el-color-primary-light-8);
  --brand-contrast: #FFFFFF;

  --accent-yellow:  var(--yellow-400);
  --accent-purple:  var(--purple-500);
  --accent-pink:    var(--pink-500);

  --text-strong:    var(--el-text-color-primary);
  --text-body:      var(--el-text-color-regular);
  --text-muted:     var(--el-text-color-secondary);
  --text-faint:     var(--el-text-color-placeholder);
  --text-disabled:  var(--el-text-color-disabled);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--el-color-primary);

  --surface-page:   var(--el-bg-color-page);
  --surface-card:   var(--el-bg-color);
  --surface-sunken: var(--el-fill-color-light);
  --surface-inverse:#303133;

  --border-subtle:  var(--el-border-color-lighter);
  --border-base:    var(--el-border-color);
  --border-strong:  var(--el-border-color-dark);
  --border-brand:   var(--el-color-primary);

  --success:        var(--el-color-success);
  --success-soft:   var(--el-color-success-light-9);
  --warning:        var(--el-color-warning);
  --warning-soft:   var(--el-color-warning-light-9);
  --danger:         var(--el-color-danger);
  --danger-soft:    var(--el-color-danger-light-9);
  --info:           var(--el-color-info);
  --info-soft:      var(--el-color-info-light-9);

  /* Focus ring (brand-tinted, subtle — Element uses border color change) */
  --ring: 0 0 0 2px var(--el-color-primary-light-7);
}