/* ============================================================
   24好玩 · Radii, shadows, sizing & motion  (Element Plus base)
   Element is crisp: 4px base radius, subtle layered shadows,
   32px default control height. A couple of brand "round"/"glow"
   tokens are kept for the playful marketing layer only.
   ============================================================ */
:root {
  /* ---- Element radii ---- */
  --el-border-radius-base:   4px;
  --el-border-radius-small:  2px;
  --el-border-radius-round:  20px;
  --el-border-radius-circle: 100%;

  /* Aliases */
  --radius-sm:   2px;
  --radius-md:   4px;   /* default — buttons, inputs, cards */
  --radius-lg:   8px;   /* marketing cards, modals */
  --radius-xl:   12px;
  --radius-round:20px;  /* el round buttons / pills */
  --radius-pill: 999px;
  --radius-circle: 100%;

  /* ---- Element component sizing ---- */
  --el-comp-size-large:   40px;
  --el-comp-size-default: 32px;
  --el-comp-size-small:   24px;

  /* ---- Element shadows ---- */
  --el-box-shadow:        0 12px 32px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08);
  --el-box-shadow-light:  0 0 12px rgba(0,0,0,.12);
  --el-box-shadow-lighter:0 0 6px rgba(0,0,0,.12);
  --el-box-shadow-dark:   0 16px 48px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12), 0 8px 16px -8px rgba(0,0,0,.16);

  /* Aliases */
  --shadow-xs: var(--el-box-shadow-lighter);
  --shadow-sm: var(--el-box-shadow-light);
  --shadow-md: var(--el-box-shadow);
  --shadow-lg: var(--el-box-shadow-dark);

  /* Brand glow — marketing CTAs only, not console chrome */
  --shadow-brand:  0 8px 20px rgba(32,184,152,.28);
  --shadow-pink:   0 8px 20px rgba(240,136,168,.26);

  /* ---- Motion (Element transitions are calm, no bounce) ---- */
  --el-transition-duration:      0.3s; /* @kind other */
  --el-transition-duration-fast: 0.2s; /* @kind other */
  --ease-out:  cubic-bezier(.645,.045,.355,1); /* @kind other */
  --ease-in-out: cubic-bezier(.645,.045,.355,1); /* @kind other */
  --dur-fast:  0.2s; /* @kind other */
  --dur-base:  0.3s; /* @kind other */
}